Add tooltip to heading copy button

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;

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', `
-                <button class="anchor-link" aria-label="Copy link to this section">
+                <button class="anchor-link" 
+                    aria-label="${TOOLTIP_TEXTS.default}"
+                    data-tooltip="${TOOLTIP_TEXTS.default}"
+                    data-tooltip-copied="${TOOLTIP_TEXTS.copied}">
                     <svg width="1em" height="0.85em" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
                 </button>
             `)
@@ -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);
     }