ghostcms/solo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tooltip to heading copy button

Browse Source
This commit is contained in:
Evan Wondrasek 2025-02-28 11:44:39 -08:00
parent f921be0ad4
commit 9203980d4b
2 changed files with 43 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
assets/css/screen.css
View File

@ -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;

16
assets/js/main.js
View File

@ -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);
}