ben/HowDoYouConvert
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Track tooltip vertically

Browse Source
This commit is contained in:
Codex Agent
2026-03-09 18:41:48 +00:00
parent 6af3b23987
commit e4987d6764
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
hdyc-svelte/src/app.css
View File

@@ -676,6 +676,7 @@ a:focus-visible {
display: block; display: block;
position: relative; position: relative;
--calc-tooltip-left: 50%; --calc-tooltip-left: 50%;
--calc-tooltip-translate: 0.2rem;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
background: var(--card-bg); background: var(--card-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -699,7 +700,8 @@ a:focus-visible {
} }
.calc-list-tooltip { .calc-list-tooltip {
position: absolute; position: absolute;
bottom: calc(100% + 0.4rem); bottom: var(--calc-tooltip-bottom, calc(100% + 0.4rem));
top: var(--calc-tooltip-top, auto);
left: var(--calc-tooltip-left, 50%); left: var(--calc-tooltip-left, 50%);
background: var(--section-bg); background: var(--section-bg);
color: var(--text); color: var(--text);
@@ -712,7 +714,7 @@ a:focus-visible {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: translate(-50%, 0.2rem); transform: translate(-50%, var(--calc-tooltip-translate, 0.2rem));
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
white-space: nowrap; white-space: nowrap;
z-index: 2; z-index: 2;

7
hdyc-svelte/src/routes/category/[category]/+page.svelte
View File

@@ -8,13 +8,20 @@
if (!card) return; if (!card) return;
const rect = card.getBoundingClientRect(); const rect = card.getBoundingClientRect();
const x = Math.min(Math.max(event.clientX - rect.left, 0), rect.width); const x = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
const y = Math.min(Math.max(event.clientY - rect.top, 0), rect.height);
card.style.setProperty('--calc-tooltip-left', `${x}px`); card.style.setProperty('--calc-tooltip-left', `${x}px`);
card.style.setProperty('--calc-tooltip-top', `${y}px`);
card.style.setProperty('--calc-tooltip-bottom', 'auto');
card.style.setProperty('--calc-tooltip-translate', '-100%');
}; };
const resetCalcTooltipPosition = (event: MouseEvent) => { const resetCalcTooltipPosition = (event: MouseEvent) => {
const card = event.currentTarget as HTMLElement | null; const card = event.currentTarget as HTMLElement | null;
if (!card) return; if (!card) return;
card.style.removeProperty('--calc-tooltip-left'); card.style.removeProperty('--calc-tooltip-left');
card.style.removeProperty('--calc-tooltip-top');
card.style.removeProperty('--calc-tooltip-bottom');
card.style.removeProperty('--calc-tooltip-translate');
}; };
export let data: PageData; export let data: PageData;