fix(Tooltip): Correctly set tooltip position on chart enter and exit (#655)

* Ignore content-collections (needed until #651 is merged)

* fix(Tooltip): Correctly set tooltip position on chart enter and exit

Author: techniq

.changeset/brown-terms-tie.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Tooltip): Correctly set tooltip position on chart enter and exit

.gitignore

@@ -9,3 +9,6 @@ coverage/
 .DS_Store
 
 test-*
+
+# Content Collections
+.content-collections

packages/layerchart/src/lib/components/tooltip/Tooltip.svelte

@@ -192,21 +192,20 @@
   const ctx = getChartContext();
   const tooltipCtx = getTooltipContext();
 
-  let tooltipWidth = $state(0);
-  let tooltipHeight = $state(0);
+  let tooltipWidth = $state<number | null>(null);
+  let tooltipHeight = $state<number | null>(null);
 
   function alignValue(value: number, align: Align, additionalOffset: number, tooltipSize: number) {
     const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
     return value + (align === 'end' ? -additionalOffset : additionalOffset) - alignOffset;
   }
 
   const positions = $derived.by(() => {
-    if (!tooltipCtx.data) {
-      // if no data, fallback?
-      const tooltipX = untrack(() => tooltipCtx.x);
-      const tooltipY = untrack(() => tooltipCtx.y);
-      return { x: tooltipX, y: tooltipY };
+    // if no data or tooltip size is not known yet, return null
+    if (!tooltipCtx.data || tooltipWidth === null || tooltipHeight === null) {
+      return { x: null, y: null };
     }
+
     const xBandOffset = isScaleBand(ctx.xScale)
       ? ctx.xScale.step() / 2 - (ctx.xScale.padding() * ctx.xScale.step()) / 2
       : 0;
@@ -345,8 +344,8 @@
     };
   });
 
-  const motionX = createMotion(tooltipCtx.x, () => positions.x, motion);
-  const motionY = createMotion(tooltipCtx.y, () => positions.y, motion);
+  const motionX = createMotion(null, () => positions.x, motion);
+  const motionY = createMotion(null, () => positions.y, motion);
 
   $effect(() => {
     if (!tooltipCtx.data) {

packages/layerchart/src/lib/utils/motion.svelte.ts

@@ -162,7 +162,7 @@ function setupTracking<T>(
   if (options.controlled) return;
 
   $effect(() => {
-    motion.set(getValue());
+    motion.set(getValue(), { instant: motion.target == null });
   });
 }
 

packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte

@@ -457,6 +457,37 @@
   </div>
 </Preview>
 
+<h2>Disable motion</h2>
+
+<Preview data={dateSeries}>
+  <div class="h-[300px] p-4 border rounded-sm">
+    <Chart
+      data={dateSeries}
+      x="date"
+      y="value"
+      yDomain={[0, null]}
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'quadtree-x' }}
+    >
+      <Layer type={shared.renderContext}>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" rule />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
+        <Highlight points lines />
+      </Layer>
+      <Tooltip.Root motion="none">
+        {#snippet children({ data })}
+          <Tooltip.Header value={data.date} format="day" />
+          <Tooltip.List>
+            <Tooltip.Item label="value" value={data.value} />
+          </Tooltip.List>
+        {/snippet}
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
 <h2>Anchor location</h2>
 
 <div class="grid grid-cols-3 gap-2 mb-2">