Correction affichage tooltips

barre_latérale/sidebar.html

@@ -174,7 +174,7 @@
       transform: translateX(-50%);
       background-color: rgba(0,0,0,0.75);
       color: #fff;
-      font-size: 12px !important;
+      font-size: 14px !important;
       font-weight: lighter !important;
       padding: 6px 10px;
       border-radius: 5px;
@@ -238,7 +238,6 @@
       background: none;
       border: none;
       cursor: pointer;
-      font-size: 16px;
       padding: 2px;
       transition: transform 0.2s ease-in-out;
       width: 15%;
@@ -251,13 +250,46 @@
       filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg);
       transition: filter 0.3s ease-in-out;
     }
+
     .lexique-highlight-toggle[data-active="true"] .feutre-icon {
       filter: brightness(0) saturate(100%) invert(83%) sepia(89%) saturate(588%) hue-rotate(360deg);
     }
-    .lexique-highlight-toggle:hover {
-      transform: scale(1.1);
+
+    /* Cibler les tooltips à l'intérieur d'un bouton de surlignage */
+    button.lexique-highlight-toggle .tooltip {
+      /* Réinitialiser toute influence du style global du bouton */
+      all: unset;
+      /* Appliquer les styles désirés pour le tooltip */
+      display: block;
+      box-sizing: border-box;
+      position: absolute;
+      bottom: 120%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-5px);
+      background-color: rgba(0, 0, 0, 0.75);
+      color: #fff;
+      font-size: 14px;
+      font-weight: lighter;
+      padding: 6px 10px;
+      border-radius: 5px;
+      white-space: normal;
+      overflow-wrap: break-word;
+      width: 180px;
+      text-align: center;
+      opacity: 0;
+      transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
+      pointer-events: none;
+      z-index: 10;
+      line-height: normal;
+    }
+
+    /* Lors du survol du conteneur, afficher le tooltip */
+    button.lexique-highlight-toggle:hover .tooltip {
+      opacity: 1;
+      transform: translateX(-50%) translateY(-5px);
     }
 
+
     /* Autres styles divers */
     .lexicon-section {
       margin-bottom: 10px;

barre_latérale/sidebar.js

@@ -278,24 +278,31 @@ function displayLexiconsWithCheckbox(lexicons) {
     lexiquesContainer.appendChild(lexiqueDiv);
   });
 
-  // Ajustement dynamique des tooltips pour éviter qu'ils ne soient coupés
+  // Ajustement dynamique des tooltips
   setTimeout(() => {
+    const menu = document.getElementById("menu");
+    const menuRect = menu.getBoundingClientRect();
     const containers = document.querySelectorAll('.tooltip-container');
-    const menuRect = document.getElementById("menu").getBoundingClientRect();
+  
     containers.forEach(container => {
-      container.classList.remove('left', 'right');
-      const rect = container.getBoundingClientRect();
-      // Si le conteneur est trop proche du bord gauche du menu
-      if (rect.left < menuRect.left + 50) {
-        container.classList.add("left");
+      const tooltip = container.querySelector('.tooltip');
+      if (!tooltip) return;
+
+      tooltip.style.left = '50%';
+      tooltip.style.transform = 'translateX(-50%) translateY(-5px)';
+  
+      const tooltipRect = tooltip.getBoundingClientRect();
+      if (tooltipRect.left < menuRect.left) {
+        const overflowLeft = menuRect.left - tooltipRect.left;
+        tooltip.style.transform = `translateX(calc(-100% + ${overflowLeft}px)) translateY(-5px)`;
       }
-      // Si le conteneur est trop proche du bord droit du menu
-      else if (rect.right > menuRect.right - 50) {
-        container.classList.add("right");
+      else if (tooltipRect.right > menuRect.right) {
+        const overflowRight = tooltipRect.right - menuRect.right;
+        tooltip.style.transform = `translateX(calc(-100% - ${overflowRight}px)) translateY(-5px)`;
       }
     });
   }, 100);
-}
+}