JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="classTuile">
  <span class="classTitre"><?php echo "Programmation chauffage";?></span>
  <br>
  <svg id="idHeaSch0" class="classProg" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
  <br>
  <svg id="idHeaSch1" class="classProg" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
  <br>
  <svg id="idHeaSch2" class="classProg" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
  <br>
  <svg id="idHeaSch3" class="classProg" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
  <br>
  <svg id="idHeaSch4" class="classProg" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
  <br>
  <svg id="idHeaSch5" class="classProg" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
  <br>
  <svg id="idHeaSch6" class="classProg" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
  <br>
</div>

<div class="infobulle">
  <div class="infobulle-pointer"></div>
</div>

CSS

body{
  background: #36b0b6;
}

.classTuile {
  width: 250px;
  height: 395px;
  padding: 6px;
  margin-top: 20px;
  margin-left: 20px;
  position: relative;
  background-color: #FFFFFF;
  outline: 1px solid #A0A0A0;
  outline-offset: -1px;
  border-radius: 12px;
  color: #000000;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
  /*font-family: "Segoe UI";*/
}

.classTitre {
  position: absolute;
  width: 100%;
  height: 28px;
  text-align: center;
  font-size: 14px;
  background-color: #3e3e42;
  color: #fff;
  border-radius: 11px 11px 0 0;
  outline: 1px solid #A0A0A0;
  outline-offset: -1px;
  margin-left: -6px;
  margin-top: -6px;
  -webkit-border-radius: 11px 11px 0 0;
  border-bottom: 4px solid #ff0000;
}

.classProg {
  position: relative;
  width: 220px;
  height: 40px;
  top: 8px;
  margin-left: 10px;
  margin-top: 8px;
}
.enabledinfobulle {
  cursor: pointer;
}

.infobulle {
  pointer-events: none;
  position: absolute;
  font-size: 14px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 5;
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  color: #000000;
  border: solid 1px #808080;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: none;
}

 .infobulle,
 .background {
   background-color: rgba(255, 255, 255, 0.8);
}

.infobulle.active {
  display: block;
}

.infobulle-pointer {
  display: block;
  width: 32px;
  height: 32px;
  
  position: absolute;
  top: 100%;
  left: calc(50% - 16px);
  
  overflow: hidden;
}

.infobulle-pointer::before {
  content: "";
  
  display: block;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  
  position: absolute;
  top: -8px;
  left: 8px;
  
  background-color: rgba(255, 255, 255, 0.8);
  border: solid 1px #808080;
  box-sizing: border-box;
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.5);
}

JavaScript

var svgNS = "http://www.w3.org/2000/svg";

function createSvgLine(idParent, x1, y1, x2, y2, color) {
  var myLine = document.createElementNS(svgNS, "line");
  myLine.setAttributeNS(null, "x1", x1);
  myLine.setAttributeNS(null, "y1", y1);
  myLine.setAttributeNS(null, "x2", x2);
  myLine.setAttributeNS(null, "y2", y2);
  myLine.setAttributeNS(null, "fill", "none");
  myLine.setAttributeNS(null, "stroke", color);

  idParent.appendChild(myLine);
}

function createSvgText(idParent, x, y, str, size, color, fontname, anchor) {
  var myText = document.createElementNS(svgNS, "text");
  myText.setAttributeNS(null, "x", x);
  myText.setAttributeNS(null, "y", y);
  myText.setAttributeNS(null, "fill", color);
  myText.setAttributeNS(null, "stroke", "none");
  myText.setAttributeNS(null, "font-family", fontname);
  myText.setAttributeNS(null, "font-size", size);
  myText.setAttributeNS(null, "text-anchor", anchor);
  myText.innerHTML = str;

  idParent.appendChild(myText);
}

function createSvgRect(idParent, x1, y1, x2, y2, color, enabled, id) {
  var w = x2 - x1;
  var h = y2 - y1;
  var myRect = document.createElementNS(svgNS, "rect");
  myRect.setAttributeNS(null, "x", x1);
  myRect.setAttributeNS(null, "y", y1);
  myRect.setAttributeNS(null, "width", w);
  myRect.setAttributeNS(null, "height", h);
  myRect.setAttributeNS(null, "fill", color);
  myRect.setAttributeNS(null, "stroke", "none");
  if (enabled) {
    myRect.setAttributeNS(null, "id", id);
    myRect.setAttributeNS(null, "class", "enabledinfobulle");
  }

  idParent.appendChild(myRect);
}

function createSvg(id, prog, title) {
  var idSvg = document.getElementById(id);

  while (idSvg.firstChild) {
    idSvg.firstChild.remove()
  }

  var gris = "#808080";
  var grisClair = "#C0C0C0";
  var noir = "#000000";
  var bleuclair = "#7cb6ec";
  var orange = "#f7a35c";
  var rouge = "#f45b5b";

  var font = "Segoe UI";
  var fontSize = "14";

  var titleX = 0;
  var titleY = 30;

  var i;
  var str;
  var strY = 12;
...