olivesbdh/js/audio-tooltip.js

(function (Drupal, once) {
  'use strict';

  Drupal.behaviors.audioLinkTooltip = {
    attach: function (context) {
      once('audio-tooltip', '.ethnography-link', context).forEach((link) => {
        const href = link.getAttribute('href');
        if (!href) return;

        // Create tooltip
        const tooltip = document.createElement('div');
        tooltip.className = 'audio-tooltip';
        tooltip.innerHTML = `<a href="${href}" class="audio-tooltip-link">View Transcript →</a>`;
        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';

          // 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),
                  flip(),
                  shift({ padding: 8 })
                ]
              }).then(({ x, y }) => {
                Object.assign(tooltip.style, {
                  left: `${x}px`,
                  top: `${y}px`
                });
              });
            });
          }).catch(() => {
            // 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`;
            tooltip.style.transform = 'translateX(-50%)';
          });
        };

        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', scheduleHide);

        // Keep open when hovering tooltip
        tooltip.addEventListener('mouseenter', () => {
          clearTimeout(hideTimeout);
          tooltip.style.display = 'block';
        });

        tooltip.addEventListener('mouseleave', scheduleHide);

        // Optional: Clean up on click (prevents stuck tooltips)
        tooltip.querySelector('a').addEventListener('click', () => {
          tooltip.style.display = 'none';
          if (cleanup) cleanup();
        });
      });
    }
  };
})(Drupal, once);