falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tooltip positioning — measure after rAF, shift up minimally to fit

Browse Source
This commit is contained in:
Falkan
2026-03-19 00:05:09 -04:00
parent c13db8b826
commit 65f760a254
2 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
data/units.json
View File

@@ -253,7 +253,9 @@
"labelPlural": "fathoms", "labelPlural": "fathoms",
"symbol": "ftm", "symbol": "ftm",
"group": "lengths-and-distance", "group": "lengths-and-distance",
"toBase": 1828.8 "toBase": 1828.8,
"description": "The conversion of dickloads to fathoms is based on a 1' x 1' x 1ftm column of pure water at 4 degrees celsius. Obviously.",
"hidden": false
} }
], ],
"groups": [ "groups": [
@@ -270,7 +272,7 @@
"id": "lengths-and-distance", "id": "lengths-and-distance",
"label": "Lengths and Distance", "label": "Lengths and Distance",
"baseUnitId": "mm", "baseUnitId": "mm",
"toUniversal": 1, "toUniversal": 14.2332177486,
"alwaysShowLabel": false, "alwaysShowLabel": false,
"hidden": false "hidden": false
} }

37
src/lib/actions/tooltip.ts
View File

@@ -29,19 +29,27 @@ export function tooltip(node: HTMLElement, text: string) {
if (!currentText) return; if (!currentText) return;
const el = getTooltipEl(); const el = getTooltipEl();
el.textContent = currentText; el.textContent = currentText;
// Position off-screen first so we can measure dimensions after render
el.style.left = '-9999px';
el.style.top = '-9999px';
el.classList.add('hu-tooltip--visible'); el.classList.add('hu-tooltip--visible');
// Position near cursor, clamped to viewport with 8px margin // Use rAF to let the browser lay out the element before measuring
requestAnimationFrame(() => {
position(el, e.clientX, e.clientY);
});
}
function position(el: HTMLDivElement, cx: number, cy: number) {
const margin = 8; const margin = 8;
const w = el.offsetWidth; const w = el.offsetWidth;
const h = el.offsetHeight; const h = el.offsetHeight;
const x = Math.min(e.clientX + 12, window.innerWidth - w - margin); const x = Math.min(cx + 12, window.innerWidth - w - margin);
// Try below cursor first; if it clips the bottom, flip above // Place below cursor; shift up only as much as needed to fit
let y = e.clientY + 20; let y = cy + 20;
if (y + h + margin > window.innerHeight) { const overflow = y + h + margin - window.innerHeight;
y = e.clientY - h - 12; if (overflow > 0) y -= overflow;
}
// Final clamp: don't go above top of viewport
y = Math.max(margin, y); y = Math.max(margin, y);
el.style.left = `${x}px`; el.style.left = `${x}px`;
el.style.top = `${y}px`; el.style.top = `${y}px`;
@@ -55,18 +63,7 @@ export function tooltip(node: HTMLElement, text: string) {
function move(e: MouseEvent) { function move(e: MouseEvent) {
// Keep tooltip near cursor while hovering // Keep tooltip near cursor while hovering
if (!tooltipEl?.classList.contains('hu-tooltip--visible')) return; if (!tooltipEl?.classList.contains('hu-tooltip--visible')) return;
const el = getTooltipEl(); position(getTooltipEl(), e.clientX, e.clientY);
const margin = 8;
const w = el.offsetWidth;
const h = el.offsetHeight;
const x = Math.min(e.clientX + 12, window.innerWidth - w - margin);
let y = e.clientY + 20;
if (y + h + margin > window.innerHeight) {
y = e.clientY - h - 12;
}
y = Math.max(margin, y);
el.style.left = `${x}px`;
el.style.top = `${y}px`;
} }
function leave() { function leave() {