'; document.body.appendChild(overlay); window._globalInfoTooltipOverlay = overlay; } var box = overlay.querySelector('.info-tooltip-overlay__content'); var inner = overlay.querySelector('.info-tooltip-overlay__inner'); var activeIcon = null; var hideTimeout = null; function positionOverlay() { if (!activeIcon) return; var rect = activeIcon.getBoundingClientRect(); var top = rect.bottom + 8; var left = rect.left + rect.width / 2; var vw = window.innerWidth || document.documentElement.clientWidth; if (left vw - 20) left = vw - 20; box.style.top = top + 'px'; box.style.left = left + 'px'; } function showFromIcon(icon) { var wrapper = icon.closest('.info-tooltip'); if (!wrapper) return; var text = wrapper.getAttribute('data-tooltip') || ''; inner.textContent = text; activeIcon = icon; overlay.classList.add('is-active'); positionOverlay(); } function hideOverlay() { overlay.classList.remove('is-active'); activeIcon = null; } function scheduleHide() { if (hideTimeout) clearTimeout(hideTimeout); hideTimeout = setTimeout(hideOverlay, 150); } function cancelHide() { if (hideTimeout) { clearTimeout(hideTimeout); hideTimeout = null; } } // Bind overlay hover once if (!window._globalInfoTooltipOverlayBound) { window._globalInfoTooltipOverlayBound = true; // Use the entire tooltip (arrow + box) as the hover area var hoverArea = overlay.querySelector('.info-tooltip-overlay__content'); hoverArea.addEventListener('mouseenter', cancelHide); hoverArea.addEventListener('mouseleave', scheduleHide); window.addEventListener('scroll', positionOverlay, { passive: true }); window.addEventListener('resize', positionOverlay); // Click anywhere on page closes tooltip (for touch) document.addEventListener('click', function (e) { if (!overlay.classList.contains('is-active')) return; if (e.target.closest('.info-tooltip__icon') || e.target.closest('.info-tooltip-overlay__inner')) { return; } hideOverlay(); }); } // Bind hover + tap to all icons on this page document.querySelectorAll('.info-tooltip__icon').forEach(function (icon) { if (icon.dataset.tooltipHoverBound) return; icon.dataset.tooltipHoverBound = '1'; icon.addEventListener('mouseenter', function () { cancelHide(); showFromIcon(icon); }); icon.addEventListener('mouseleave', function () { scheduleHide(); }); // Tap / click fallback for touch devices icon.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); if (overlay.classList.contains('is-active') && activeIcon === icon) { hideOverlay(); } else { cancelHide(); showFromIcon(icon); } }); }); })();