Tooltip position bug when leaving chart

[l0uisgrange]

Hi @techniq 👋, here's a new bug I found with the Tooltip component. Do you have any idea why this happens? I'm investigating in the meantime and keep this thread up to date.

<Tooltip.Root
    x="data"
    y={context.height + context.padding.top + 4}
    anchor="top"
    motion="none"
    contained={false}
>
    {#snippet children({ data })}
        {dayjs(data.date).format('L')}
    {/snippet}
</Tooltip.Root>

Enregistrement.de.l.ecran.2025-10-09.a.12.52.49.mov

[techniq]

Good callout @l0uisgrange. This is something I've been meaning to look. I have a visual that created LayerChart instances per row which makes the tooltip exiting even more prominent

CleanShot.2025-10-09.at.07.31.37.mp4

This me know if you are able to track down the root cause, but hopefully I can get some time to look at it soon as well.

[l0uisgrange]

After a quick investigation, I think the root cause is that the transition:fade makes the Tooltip disappear just after the motion.x is no longer defined. Therefore, the Tooltip will take its position in the wrong place during the 100ms of transition.

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

Lines 363 to 367 in 4944383

	style:top="{motionY.current}px"
	style:left="{motionX.current}px"
	transition:fade={{ duration: 100 }}
	bind:clientWidth={tooltipWidth}
	bind:clientHeight={tooltipHeight}

Maybe it would be better to remove this transition, as people would prefer a non-transitioned than a laggy tooltip IMO.

[l0uisgrange]

I think this issue is related to this other bug where tooltips that are on the axis appear at the cursor position, and go across the whole chart to get to their desired position, which is very inconvenient.

Enregistrement.de.l.ecran.2025-10-09.a.14.06.33.mov

[l0uisgrange]

Here's the fix, but I don't know how to do this... 😅

If the Tooltip's x prop is a number and not a string accessor like "date", we must directly give the tooltip the position on the desired coordinate instead of giving it point.x, which is the coordinate of the the pointer.

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

Lines 398 to 399 in 1678de5

	x = point.x;
	y = point.y;

Also, on a side note, looks like there is a deprecated usage or localPoint here

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

Line 299 in 1678de5

const point = localPoint(e, containerNode);

[techniq]

@l0uisgrange hurt my head, but finally cracked this nut. layerchart@2.0.0-next.41 resolves my use case and the examples in the docs (see PR for before/after videos as well).

CleanShot.2025-10-10.at.11.55.51.mp4

Let me know how it works for you 😁