<script>
 document.addEventListener('DOMContentLoaded', function () {
 
     // Créer un élément tooltip global
     let tooltip = document.createElement('div');
     tooltip.className = 'subject-tooltip-box';
     let content = document.createElement('div');
     content.className = 'tooltip-content';
     tooltip.appendChild(content);
     document.body.appendChild(tooltip);
 
     // Parcourir tous les liens de sujet
     document.querySelectorAll('.subject-tooltip').forEach(link => {
 
         let loaded = false;  // pour éviter plusieurs requêtes
         let tooltipHtml = '';
 
         // Survol du lien
         link.addEventListener('mouseenter', function (e) {
 
             if (loaded) {
                 tooltip.style.display = 'block';
                 content.innerHTML = tooltipHtml;
                 return;
             }
 
             let subjectId = this.getAttribute('data-subjectid');
 
             fetch('subject_tooltip.php?subjectid=' + subjectId)
                 .then(response => response.text())
                 .then(html => {
                     tooltipHtml = html;
                     content.innerHTML = html;
                     tooltip.style.display = 'block';
                     loaded = true;
                 });
 
         });
 
         // Suivre la souris
         link.addEventListener('mousemove', function (e) {
             tooltip.style.top = (e.pageY + 15) + 'px';
             tooltip.style.left = (e.pageX + 15) + 'px';
         });
 
         // Sortie de survol
         link.addEventListener('mouseleave', function () {
             tooltip.style.display = 'none';
         });
 
     });
 
 });
 </script>