diff --git "a/barre_lat\303\251rale/sidebar.html" "b/barre_lat\303\251rale/sidebar.html" index 40e9ed6522c40cd3314321692f0e71b5ca9d3230..28f7552cac65611290e93a9f7f27b353f5ab3fde 100644 --- "a/barre_lat\303\251rale/sidebar.html" +++ "b/barre_lat\303\251rale/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; diff --git "a/barre_lat\303\251rale/sidebar.js" "b/barre_lat\303\251rale/sidebar.js" index 2bf81251c480693a8d575e4404186fc1f2b9a68e..0ec73904e1dddf9f3c3c096bf9ee2ecec91a47e8 100644 --- "a/barre_lat\303\251rale/sidebar.js" +++ "b/barre_lat\303\251rale/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); -} +}