dans le On remplit la

avec le texte correspondant au titre On positionne la bulle au dessus de l'élément On ajoute une classe, pour animer l'apparition } Lorsque l'on quitte le survole { On retire une classe, pour animer la disparition Lorsque l'animation se termine { On supprime la

du } } https://grafikart.fr/tutoriels/infobulle-963 ça fonctionne mais un title vide est dupliqué once:true ne fonctionne pas pour le moment toutefois le javascript peut changer un title

class Tooltip {
  /**
   * Applique le système de bulle d'infos sur les éléments
   * @param {string} selector 
   */
  static bind (selector) {
    document.querySelectorAll(selector).forEach(element => new Tooltip(element));
  }

/**
   * @param {HTMLElement} element 
   */
  constructor (element) {
    this.element = element;
    let tooltipTarget = this.element.getAttribute('data-tooltip');
//alert('line 43 '+this.element.getAttribute('title')); //Donner 5 étoiles 
    let text=(tooltipTarget?document.querySelector(tooltipTarget).innerHTML:this.element.getAttribute('title'));
if(!text)return;
this.title = '☰ '+text;
///alert('line 48 '+text); //null   
if(0){
    if (tooltipTarget&&text) {
//alert('line 46 '+document.querySelector(tooltipTarget).innerHTML);    
      this.title = document.querySelector(tooltipTarget).innerHTML;
    } else {
//alert('line 49 '+document.querySelector(tooltipTarget).innerHTML);    
      this.title = element.getAttribute('title');
    }
}
///    this.title = '☰ '+this.title;
    this.tooltip = null;
    this.element.addEventListener('mouseover', this.mouseOver.bind(this));
    this.element.addEventListener('mouseout', this.mouseOut.bind(this));
  }

mouseOver () {
    let tooltip = this.createTooltip();
    let width = tooltip.offsetWidth;
    let height = tooltip.offsetHeight;
    let left = this.element.offsetWidth / 2 - width / 2 + this.element.getBoundingClientRect().left + document.documentElement.scrollLeft;
    let top = this.element.getBoundingClientRect().top - height - 15 + document.documentElement.scrollTop;
    if (left < 20) {
      left = 20;
    }
    tooltip.style.left = left + "px";
    tooltip.style.top = top + "px";
    tooltip.style.background = 'black';
    tooltip.style.color = 'white';
//      this.tooltip.style.background = 'black';
//      this.tooltip.style.color = 'white';
    tooltip.classList.add('visible');
  }

mouseOut () {
    if (this.tooltip !== null) {
      this.tooltip.classList.remove('visible');
      this.tooltip.addEventListener('transitionend', () => 
//      { once : true } //à addEventListener
      
//      ,
      {
        if (this.tooltip !== null) {
          document.body.removeChild(this.tooltip);
          this.tooltip = null;
        }
      }
      )
    }
  }

/**
   * Crée et injecte la bulle d'info dans l'HTML
   * @returns {HTMLElement}
   */
  createTooltip () {
    if (this.tooltip === null) {
      let tooltip = document.createElement('div');
      tooltip.innerHTML = this.title;
      tooltip.classList.add('tippy');
      document.body.appendChild(tooltip);
      this.tooltip = tooltip;
//      this.tooltip.style.background = 'black';
//      this.tooltip.style.color = 'white';
    }
    return this.tooltip;
  }
}

//Tooltip.bind('a[title]');
//</script>

/*
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body {
      height: 2000px;
      / * make body scrollable, the tooltip should work after the scroll * /
    }

.tooltip {
      position: fixed;
      padding: 10px 20px;
      border: 1px solid #b3c9ce;
      border-radius: 4px;
      text-align: center;
      font: italic 14px/1.3 sans-serif;
      color: #333;
      background: #fff;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
    }
  </style>
</head>

<body>

<p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
  <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>

<button data-tooltip="the tooltip is longer than the element">Short button</button>
  <button data-tooltip="HTML<br>tooltip">One more button</button>

<p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>

document.onmouseover = function(event) {
      let target = event.target;

// if we have tooltip HTML...
      let tooltipHtml = target.dataset.tooltip;
      if (!tooltipHtml) return;

// ...create the tooltip element

tooltipElem = document.createElement('div');
      tooltipElem.className = 'tooltip';
      tooltipElem.innerHTML = tooltipHtml;
      document.body.append(tooltipElem);

// position it above the annotated element (top-center)
      let coords = target.getBoundingClientRect();

let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
      if (left < 0) left = 0; // don't cross the left window edge

let top = coords.top - tooltipElem.offsetHeight - 5;
      if (top < 0) { // if crossing the top window edge, show below instead
        top = coords.top + target.offsetHeight + 5;
      }

tooltipElem.style.left = left + 'px';
      tooltipElem.style.top = top + 'px';
    };

document.onmouseout = function(e) {

if (tooltipElem) {
        tooltipElem.remove();
        tooltipElem = null;
      }

};
  </script>

</body>
</html>