diff options
Diffstat (limited to 'src/lib/Tooltip')
| -rw-r--r-- | src/lib/Tooltip/LinkedTooltip.svelte | 5 | ||||
| -rw-r--r-- | src/lib/Tooltip/tooltip.ts | 22 |
2 files changed, 12 insertions, 15 deletions
diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte index b3fc6ae2..94aab52b 100644 --- a/src/lib/Tooltip/LinkedTooltip.svelte +++ b/src/lib/Tooltip/LinkedTooltip.svelte @@ -35,7 +35,10 @@ onDestroy(() => { const createTooltip = () => { if (!tooltipDiv) { tooltipDiv = document.createElement("div"); - tooltipDiv.style.position = "absolute"; + tooltipDiv.style.position = "fixed"; + 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..8c846a78 100644 --- a/src/lib/Tooltip/tooltip.ts +++ b/src/lib/Tooltip/tooltip.ts @@ -3,9 +3,7 @@ const tooltip = (element: HTMLElement) => { const offset = 10; const tooltipTransitionTime = 200; const tooltipHideDelay = 10; - const debounceDelay = 100; let hideTimeout: number | null = null; - let debounceTimer: number | null = null; if (element.dataset.tooltipDisable === "true") return; @@ -13,13 +11,14 @@ const tooltip = (element: HTMLElement) => { if (!tooltipDiv) { tooltipDiv = document.createElement("div"); - tooltipDiv.style.position = "absolute"; + tooltipDiv.style.position = "fixed"; + 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"); @@ -47,7 +46,7 @@ const tooltip = (element: HTMLElement) => { if (top < 0) top = rect.top + rect.height + offset; tooltipDiv.style.left = `${left}px`; - tooltipDiv.style.top = `${top + window.scrollY}px`; + tooltipDiv.style.top = `${top}px`; return; } @@ -116,18 +115,14 @@ const tooltip = (element: HTMLElement) => { } if (!tooltipDiv) { - showTooltip(title, event.pageX, event.pageY); + showTooltip(title, event.clientX, event.clientY); } } }; const handleMouseMove = (event: MouseEvent) => { - if (debounceTimer !== null) clearTimeout(debounceTimer); - - debounceTimer = window.setTimeout(() => { - if (tooltipDiv && tooltipDiv.style.opacity === "1") - updateTooltipPosition(event.pageX, event.pageY); - }, debounceDelay); + if (tooltipDiv && tooltipDiv.style.opacity === "1") + updateTooltipPosition(event.clientX, event.clientY); }; const handleMouseLeave = () => { @@ -149,7 +144,6 @@ const tooltip = (element: HTMLElement) => { element.removeEventListener("mouseleave", handleMouseLeave); if (hideTimeout !== null) clearTimeout(hideTimeout); - if (debounceTimer !== null) clearTimeout(debounceTimer); if (tooltipDiv && document.body.contains(tooltipDiv)) { document.body.removeChild(tooltipDiv); |