diff --git a/assets/css/screen.css b/assets/css/screen.css index 18abd9e..6047740 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -793,6 +793,7 @@ hr { } .anchor-link { + position: relative; opacity: 0; padding: 8px; margin-left: 4px; @@ -808,6 +809,35 @@ hr { justify-content: center; } +/* Tooltip styles */ +.anchor-link::before { + content: attr(data-tooltip); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + padding: 6px 10px; + background: var(--color-darker-gray); + color: white; + font-size: 14px; + white-space: nowrap; + border-radius: 4px; + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease; +} + +/* Show tooltip on hover */ +.anchor-link:hover::before { + opacity: 1; + visibility: visible; +} + +/* When copied, change tooltip text */ +.anchor-link.copied::before { + content: attr(data-tooltip-copied); +} + @media (hover: hover) { .anchor-link { opacity: 0; diff --git a/assets/js/main.js b/assets/js/main.js index 45dd82c..2162f5c 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -54,11 +54,19 @@ function initParallax() { })(); (function (window, document) { + const TOOLTIP_TEXTS = { + default: 'Copy link to this section', + copied: 'Link copied!' + }; + var addAnchors = () => { var headings = document.querySelectorAll('.gh-content h1, .gh-content h2, .gh-content h3, .gh-content h4, .gh-content h5, .gh-content h6') headings.forEach((heading) => { heading.insertAdjacentHTML('beforeend', ` - `) @@ -82,11 +90,13 @@ function initParallax() { function showCopiedFeedback(element) { element.classList.add('copied'); - element.setAttribute('aria-label', 'Link copied to clipboard'); + element.setAttribute('aria-label', TOOLTIP_TEXTS.copied); + element.setAttribute('data-tooltip', TOOLTIP_TEXTS.copied); setTimeout(() => { element.classList.remove('copied'); - element.setAttribute('aria-label', 'Copy link to this section'); + element.setAttribute('aria-label', TOOLTIP_TEXTS.default); + element.setAttribute('data-tooltip', TOOLTIP_TEXTS.default); }, 2000); }