1 files changed, 38 insertions, 19 deletions
diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte
index 6e468cd6..f4546d4c 100644
--- a/src/lib/Tooltip/LinkedTooltip.svelte
+++ b/src/lib/Tooltip/LinkedTooltip.svelte
@@ -2,23 +2,42 @@
   import tooltipPosition from '$stores/tooltipPosition';
   import { fade } from 'svelte/transition';
 
-  export let id: 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;
-  export let relative = false;
-  export let ignoreAnchorStyling = false;
-
-  let tooltipDiv: HTMLDivElement | null = null;
+  interface Props {
+    id?: string | undefined;
+    pin?: string | undefined;
+    content: string;
+    disable?: boolean;
+    pinPosition?: 'top' | 'bottom' | 'left' | 'right';
+    offset?: number;
+    tooltipTransitionTime?: number;
+    tooltipHideDelay?: number;
+    debounceDelay?: number;
+    tooltipOpacityTransitionTime?: number;
+    relative?: boolean;
+    ignoreAnchorStyling?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    id = undefined,
+    pin = undefined,
+    content,
+    disable = false,
+    pinPosition = 'top',
+    offset = 10,
+    tooltipTransitionTime = 200,
+    tooltipHideDelay = 10,
+    debounceDelay = 100,
+    tooltipOpacityTransitionTime = 200,
+    relative = false,
+    ignoreAnchorStyling = false,
+    children
+  }: Props = $props();
+
+  let tooltipDiv: HTMLDivElement | null = $state(null);
   let hideTimeout: number | null = null;
   let debounceTimer: number | null = null;
-  let opacity = 0;
+  let opacity = $state(0);
 
   const createTooltip = () => {
     if (!tooltipDiv) {
@@ -202,12 +221,12 @@
 
 <span
   {id}
-  on:mouseenter={handleMouseEnter}
-  on:mousemove={handleMouseMove}
-  on:mouseleave={handleMouseLeave}
+  onmouseenter={handleMouseEnter}
+  onmousemove={handleMouseMove}
+  onmouseleave={handleMouseLeave}
   role="tooltip"
 >
-  <slot />
+  {@render children?.()}
 </span>
 
 {#if tooltipDiv}