diff options
Diffstat (limited to 'src/lib/Tooltip')
| -rw-r--r-- | src/lib/Tooltip/LinkedTooltip.svelte | 15 | ||||
| -rw-r--r-- | src/lib/Tooltip/tooltip.ts | 10 |
2 files changed, 21 insertions, 4 deletions
diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte index 82147536..bbf0ffe5 100644 --- a/src/lib/Tooltip/LinkedTooltip.svelte +++ b/src/lib/Tooltip/LinkedTooltip.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import tooltipPosition from "$stores/tooltipPosition"; import { fade } from "svelte/transition"; +import { onDestroy } from "svelte"; export let id: string | undefined = undefined; export let pin: string | undefined = undefined; @@ -20,10 +21,24 @@ let hideTimeout: number | null = null; let debounceTimer: number | null = null; let opacity = 0; +onDestroy(() => { + if (hideTimeout !== null) clearTimeout(hideTimeout); + + if (debounceTimer !== null) clearTimeout(debounceTimer); + + if (tooltipDiv && tooltipDiv.parentNode === document.body) { + document.body.removeChild(tooltipDiv); + tooltipDiv = null; + } +}); + 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); + }); } }; |