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;
position: relative;
--calc-tooltip-left: 50%;
--calc-tooltip-translate: 0.2rem;
padding: 1rem 1.25rem;
background: var(--card-bg);
border: 1px solid var(--border);
@@ -699,7 +700,8 @@ a:focus-visible {
}
.calc-list-tooltip {
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%);
background: var(--section-bg);
color: var(--text);
@@ -712,7 +714,7 @@ a:focus-visible {
pointer-events: none;
opacity: 0;
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;
white-space: nowrap;
z-index: 2;

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

@@ -8,13 +8,20 @@
if (!card) return;
const rect = card.getBoundingClientRect();
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-top', `${y}px`);
card.style.setProperty('--calc-tooltip-bottom', 'auto');
card.style.setProperty('--calc-tooltip-translate', '-100%');
};
const resetCalcTooltipPosition = (event: MouseEvent) => {
const card = event.currentTarget as HTMLElement | null;
if (!card) return;
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;