diff --git a/css/components/islandora_mods.css b/css/components/islandora_mods.css index 89e3046..b31bea7 100755 --- a/css/components/islandora_mods.css +++ b/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; diff --git a/js/audio-tooltip.js b/js/audio-tooltip.js new file mode 100644 index 0000000..fd1cff9 --- /dev/null +++ b/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 = `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); diff --git a/olivesbdh.libraries.yml b/olivesbdh.libraries.yml index a9352cc..e715c92 100755 --- a/olivesbdh.libraries.yml +++ b/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