diff options
Diffstat (limited to 'src/lib/List/Anime/Tooltip.svelte')
| -rw-r--r-- | src/lib/List/Anime/Tooltip.svelte | 34 |
1 files changed, 25 insertions, 9 deletions
diff --git a/src/lib/List/Anime/Tooltip.svelte b/src/lib/List/Anime/Tooltip.svelte index 1a5eb665..ae5cd410 100644 --- a/src/lib/List/Anime/Tooltip.svelte +++ b/src/lib/List/Anime/Tooltip.svelte @@ -3,16 +3,17 @@ import { fade } from 'svelte/transition'; export let id: string; - export let tooltipPin: string | undefined = undefined; + export let pin: string | undefined = undefined; export let content: string; export let disable: boolean = false; + export let pinPosition: 'top' | 'bottom' | 'left' | 'right' = 'top'; + export let offset = 10; + export let tooltipTransitionTime = 200; + export let tooltipHideDelay = 10; + export let debounceDelay = 100; + export let tooltipOpacityTransitionTime = 200; let tooltipDiv: HTMLDivElement | null = null; - const offset = 10; - const tooltipTransitionTime = 200; - const tooltipHideDelay = 10; - const debounceDelay = 100; - const tooltipOpacityTransitionTime = 200; let hideTimeout: number | null = null; let debounceTimer: number | null = null; let opacity = 0; @@ -34,8 +35,8 @@ const updateTooltipPosition = (x: number, y: number) => { if (tooltipDiv) { - if (tooltipPin) { - const pinnedElement = document.getElementById(tooltipPin); + if (pin) { + const pinnedElement = document.getElementById(pin); if (pinnedElement) { const rect = pinnedElement.getBoundingClientRect(); @@ -44,6 +45,21 @@ let top = rect.top - tooltipHeight - offset; let left = rect.left + rect.width / 2 - tooltipWidth / 2; + // pin pos + if (pinPosition === 'top') { + top = rect.top - tooltipHeight - offset; + left = rect.left + rect.width / 2 - tooltipWidth / 2; + } else if (pinPosition === 'bottom') { + top = rect.top + rect.height + offset; + left = rect.left + rect.width / 2 - tooltipWidth / 2; + } else if (pinPosition === 'left') { + top = rect.top + rect.height / 2 - tooltipHeight / 2; + left = rect.left - tooltipWidth - offset; + } else if (pinPosition === 'right') { + top = rect.top + rect.height / 2 - tooltipHeight / 2; + left = rect.left + rect.width + offset; + } + if (left < 0) left = offset; if (left + tooltipWidth > window.innerWidth) left = window.innerWidth - tooltipWidth - offset; @@ -138,7 +154,7 @@ <div {id} - data-tooltippin={tooltipPin} + data-tooltippin={pin} on:mouseenter={handleMouseEnter} on:mousemove={handleMouseMove} on:mouseleave={handleMouseLeave} |