audio

css/components/islandora_mods.css

@@ -1,3 +1,28 @@
+/*tooltips*/
+.audio-tooltip {
+  position: absolute;
+  background: #2d2d2d;
+  color: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  pointer-events: auto;
+  z-index: 1500;
+  display: none;
+  white-space: nowrap;
+}
+
+.audio-tooltip-link {
+  color: #a5d8ff;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.audio-tooltip-link:hover {
+  text-decoration: underline;
+}
+
 /*audio player*/
 div#global-audio-wrapper.is-hidden {
     display:none;

js/audio-tooltip.js

@@ -0,0 +1,64 @@
+(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);

olivesbdh.libraries.yml

@@ -59,6 +59,7 @@ global-styling:
     js/checkbox.js: {}
     js/custom.js: {}
     js/audioplayer.js: {}
+    js/audio-tooltip.js: {}
   dependencies:
     - core/drupal
     - core/once