(function (Drupal, once) { 'use strict'; Drupal.behaviors.audioLinkTooltip = { attach: function (context) { once('audio-tooltip', '.js-play-audio-from-node', context).forEach((link) => { const href = link.getAttribute('href'); if (!href) return; // Create minimal tooltip with just the link const tooltip = document.createElement('div'); tooltip.className = 'audio-tooltip'; tooltip.innerHTML = `Go to page →`; document.body.appendChild(tooltip); let cleanup = null; const showTooltip = () => { tooltip.style.display = 'block'; // Dynamically import Floating UI (works if in core or via build/CDN) 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 flip(), shift({ padding: 8 }) ] }).then(({ x, y }) => { Object.assign(tooltip.style, { left: `${x}px`, top: `${y}px` }); }); }); }).catch(() => { // Fallback positioning if Floating UI import fails 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`; tooltip.style.transform = 'translateX(-50%)'; }); }; const hideTooltip = () => { tooltip.style.display = 'none'; if (cleanup) { cleanup(); cleanup = null; } }; link.addEventListener('mouseenter', showTooltip); link.addEventListener('mouseleave', hideTooltip); // Optional: keep visible on hover of tooltip itself (so user can click) tooltip.addEventListener('mouseenter', showTooltip); tooltip.addEventListener('mouseleave', hideTooltip); }); } }; })(Drupal, once);