olivesbdh/js/audio-tooltip.js

(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 = `<a href="${href}" class="audio-tooltip-link">Go to page →</a>`;
        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);