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

revert: tooltip positioning back to 52fc0b8 (pre-viewport-clamping)

Browse Source
This commit is contained in:
Falkan
2026-03-19 00:20:37 -04:00
parent 15b5871eb9
commit 7dec5272b1
3 changed files with 19 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data/units.json
View File

@@ -272,7 +272,7 @@
"id": "lengths-and-distance",
"label": "Lengths and Distance",
"baseUnitId": "mm",
"toUniversal": 1,
"toUniversal": 0.0077828181,
"alwaysShowLabel": false,
"hidden": false
}

4
src/app.css
View File

@@ -469,10 +469,6 @@
.hu-tooltip--visible {
opacity: 1;
}
.hu-tooltip--ready {
opacity: 1;
transition: none;
}
[data-theme=dan] .hu-tooltip {
background: #000;
color: #ffff00;

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

@@ -8,8 +8,6 @@
*/
const TOOLTIP_CLASS = 'hu-tooltip';
const TOOLTIP_VISIBLE_CLASS = 'hu-tooltip--visible';
const TOOLTIP_READY_CLASS = 'hu-tooltip--ready';
// Shared tooltip element — one per page, repositioned as needed.
let tooltipEl: HTMLDivElement | null = null;
@@ -23,56 +21,36 @@ function getTooltipEl(): HTMLDivElement {
return tooltipEl;
}
/**
* Position the tooltip near (cx, cy), shifting up only as much as needed
* to keep it within the viewport. Requires the element to already be in
* the DOM with its content set so offsetWidth/offsetHeight are accurate.
*/
function position(el: HTMLDivElement, cx: number, cy: number) {
const margin = 8;
const w = el.offsetWidth;
const h = el.offsetHeight;
const x = Math.min(cx + 12, window.innerWidth - w - margin);
let y = cy + 20;
const overflow = y + h + margin - window.innerHeight;
if (overflow > 0) y -= overflow;
y = Math.max(margin, y);
el.style.left = `${x}px`;
el.style.top = `${y}px`;
}
export function tooltip(node: HTMLElement, text: string) {
let timer: ReturnType<typeof setTimeout> | null = null;
let currentText = text;
function show(cx: number, cy: number) {
function show(e: MouseEvent) {
if (!currentText) return;
const el = getTooltipEl();
el.textContent = currentText;
// Make visible but suppress the opacity transition while we measure+position.
// --ready class sets opacity:1 with no transition; --visible adds the fade-in.
el.classList.remove(TOOLTIP_VISIBLE_CLASS);
el.classList.add(TOOLTIP_READY_CLASS);
// offsetWidth/offsetHeight are now accurate (element is in DOM, display not none)
position(el, cx, cy);
// Swap to the visible class to re-enable the fade transition
el.classList.remove(TOOLTIP_READY_CLASS);
el.classList.add(TOOLTIP_VISIBLE_CLASS);
// Position near cursor, clamped to viewport
const x = Math.min(e.clientX + 12, window.innerWidth - el.offsetWidth - 8);
const y = e.clientY + 20;
el.style.left = `${x}px`;
el.style.top = `${y}px`;
el.classList.add('hu-tooltip--visible');
}
function enter(e: MouseEvent) {
if (!currentText) return;
const cx = e.clientX;
const cy = e.clientY;
timer = setTimeout(() => show(cx, cy), 500);
timer = setTimeout(() => show(e), 500);
}
function move(e: MouseEvent) {
if (!tooltipEl?.classList.contains(TOOLTIP_VISIBLE_CLASS)) return;
position(getTooltipEl(), e.clientX, e.clientY);
// Keep tooltip near cursor while hovering
if (!tooltipEl?.classList.contains('hu-tooltip--visible')) return;
const el = getTooltipEl();
const x = Math.min(e.clientX + 12, window.innerWidth - el.offsetWidth - 8);
const y = e.clientY + 20;
el.style.left = `${x}px`;
el.style.top = `${y}px`;
}
function leave() {
@@ -80,11 +58,7 @@ export function tooltip(node: HTMLElement, text: string) {
clearTimeout(timer);
timer = null;
}
const el = tooltipEl;
if (el) {
el.classList.remove(TOOLTIP_VISIBLE_CLASS);
el.classList.remove(TOOLTIP_READY_CLASS);
}
tooltipEl?.classList.remove('hu-tooltip--visible');
}
node.addEventListener('mouseenter', enter);
@@ -94,7 +68,7 @@ export function tooltip(node: HTMLElement, text: string) {
return {
update(newText: string) {
currentText = newText;
if (tooltipEl?.classList.contains(TOOLTIP_VISIBLE_CLASS)) {
if (tooltipEl?.classList.contains('hu-tooltip--visible')) {
tooltipEl.textContent = newText;
}
},
@@ -103,11 +77,7 @@ export function tooltip(node: HTMLElement, text: string) {
node.removeEventListener('mouseenter', enter);
node.removeEventListener('mousemove', move);
node.removeEventListener('mouseleave', leave);
const el = tooltipEl;
if (el) {
el.classList.remove(TOOLTIP_VISIBLE_CLASS);
el.classList.remove(TOOLTIP_READY_CLASS);
}
tooltipEl?.classList.remove('hu-tooltip--visible');
}
};
}