diff --git a/js/audio-tooltip.js b/js/audio-tooltip.js index fd1cff9..da94215 100644 --- a/js/audio-tooltip.js +++ b/js/audio-tooltip.js @@ -7,24 +7,27 @@ const href = link.getAttribute('href'); if (!href) return; - // Create minimal tooltip with just the link + // Create tooltip const tooltip = document.createElement('div'); tooltip.className = 'audio-tooltip'; tooltip.innerHTML = `Go to page →`; document.body.appendChild(tooltip); let cleanup = null; + let hideTimeout = null; + const HIDE_DELAY_MS = 250; // Adjust if needed (higher = more forgiving) const showTooltip = () => { + clearTimeout(hideTimeout); tooltip.style.display = 'block'; - // Dynamically import Floating UI (works if in core or via build/CDN) + // Floating UI dynamic import + positioning import('@floating-ui/dom').then(({ computePosition, autoUpdate, offset, flip, shift }) => { cleanup = autoUpdate(link, tooltip, () => { computePosition(link, tooltip, { placement: 'top', middleware: [ - offset(10), // distance from link + offset(10), flip(), shift({ padding: 8 }) ] @@ -36,7 +39,7 @@ }); }); }).catch(() => { - // Fallback positioning if Floating UI import fails + // Fallback centering above const rect = link.getBoundingClientRect(); tooltip.style.left = `${rect.left + window.scrollX + rect.width / 2}px`; tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 10}px`; @@ -44,20 +47,34 @@ }); }; - const hideTooltip = () => { - tooltip.style.display = 'none'; - if (cleanup) { - cleanup(); - cleanup = null; - } + const scheduleHide = () => { + clearTimeout(hideTimeout); + hideTimeout = setTimeout(() => { + tooltip.style.display = 'none'; + if (cleanup) { + cleanup(); + cleanup = null; + } + }, HIDE_DELAY_MS); }; + // Trigger events link.addEventListener('mouseenter', showTooltip); - link.addEventListener('mouseleave', hideTooltip); + link.addEventListener('mouseleave', scheduleHide); + + // Keep open when hovering tooltip + tooltip.addEventListener('mouseenter', () => { + clearTimeout(hideTimeout); + tooltip.style.display = 'block'; + }); - // Optional: keep visible on hover of tooltip itself (so user can click) - tooltip.addEventListener('mouseenter', showTooltip); - tooltip.addEventListener('mouseleave', hideTooltip); + tooltip.addEventListener('mouseleave', scheduleHide); + + // Optional: Clean up on click (prevents stuck tooltips) + tooltip.querySelector('a').addEventListener('click', () => { + tooltip.style.display = 'none'; + if (cleanup) cleanup(); + }); }); } };