diff options
| author | Fuwn <[email protected]> | 2026-04-19 11:08:52 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-04-19 11:08:52 +0000 |
| commit | 271b8f6cbb0b7415495054c2d3129f09b0ea8e37 (patch) | |
| tree | 35f1312317d3662ffe371b10db56003e624b563d /src/lib/Tooltip | |
| parent | Revert "fix(tooltip): use fixed positioning and snappy cursor tracking" (diff) | |
| download | due.moe-271b8f6cbb0b7415495054c2d3129f09b0ea8e37.tar.xz due.moe-271b8f6cbb0b7415495054c2d3129f09b0ea8e37.zip | |
fix(tooltip): park off-screen on create, enable glide after first placement
The tooltip was appended to body with no top/left, so its static-flow position
extended body.scrollWidth/scrollHeight during measurement. Fix by setting
initial top/left to -9999px so the node never lands in the flow.
Previously this slid the tooltip in from off-screen because the top/left 0.3s
transition was already live. Now the transition starts as opacity-only at
creation time; after the first updateTooltipPosition snaps into place, a
requestAnimationFrame re-enables the top/left easing so subsequent mousemove
updates keep the original smooth glide and 100ms debounce behavior.
LinkedTooltip's measurement div is parked the same way plus visibility:hidden,
since it exists only to read offsetWidth for the Svelte-rendered tooltip.
Diffstat (limited to 'src/lib/Tooltip')
| -rw-r--r-- | src/lib/Tooltip/LinkedTooltip.svelte | 3 | ||||
| -rw-r--r-- | src/lib/Tooltip/tooltip.ts | 10 |
2 files changed, 9 insertions, 4 deletions
diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte index b3fc6ae2..bbf0ffe5 100644 --- a/src/lib/Tooltip/LinkedTooltip.svelte +++ b/src/lib/Tooltip/LinkedTooltip.svelte @@ -36,6 +36,9 @@ const createTooltip = () => { if (!tooltipDiv) { tooltipDiv = document.createElement("div"); tooltipDiv.style.position = "absolute"; + tooltipDiv.style.top = "-9999px"; + tooltipDiv.style.left = "-9999px"; + tooltipDiv.style.visibility = "hidden"; tooltipDiv.style.zIndex = "1000"; opacity = 0; tooltipDiv.style.pointerEvents = "none"; diff --git a/src/lib/Tooltip/tooltip.ts b/src/lib/Tooltip/tooltip.ts index 5772c33f..3235cb25 100644 --- a/src/lib/Tooltip/tooltip.ts +++ b/src/lib/Tooltip/tooltip.ts @@ -14,12 +14,13 @@ const tooltip = (element: HTMLElement) => { tooltipDiv = document.createElement("div"); tooltipDiv.style.position = "absolute"; + tooltipDiv.style.top = "-9999px"; + tooltipDiv.style.left = "-9999px"; tooltipDiv.style.zIndex = "1000"; tooltipDiv.style.opacity = "0"; - tooltipDiv.style.transition = `opacity ${tooltipTransitionTime}ms ease-in-out, top 0.3s ease, left 0.3s ease`; + tooltipDiv.style.transition = `opacity ${tooltipTransitionTime}ms ease-in-out`; tooltipDiv.style.pointerEvents = "none"; tooltipDiv.style.whiteSpace = "nowrap"; - tooltipDiv.style.zIndex = "1000"; tooltipDiv.classList.add("card"); tooltipDiv.classList.add("card-small"); @@ -81,11 +82,12 @@ const tooltip = (element: HTMLElement) => { tooltipDiv.innerHTML = content.replace(/\n/g, "<br>"); updateTooltipPosition(x, y); - setTimeout(() => { + requestAnimationFrame(() => { if (tooltipDiv) { + tooltipDiv.style.transition = `opacity ${tooltipTransitionTime}ms ease-in-out, top 0.3s ease, left 0.3s ease`; tooltipDiv.style.opacity = "1"; } - }, 10); + }); } }; |