layerchart 2.0.0-next.53 → 2.0.0-next.54

package/dist/components/tooltip/Tooltip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
+  import type { PortalOptions } from '@layerstack/svelte-actions';
   import type { Without } from '../../utils/types.js';
   import type { Placement } from '../types.js';
 
@@ -49,6 +50,14 @@
      */
     motion?: MotionProp;
 
+    /**
+     * Duration of the fade in/out transition in milliseconds.
+     * Set to `0` to disable the fade transition.
+     *
+     * @default 100
+     */
+    fadeDuration?: number;
+
     /**
      * Allow pointer events.  Disabled by default to reduce accidental selection, but useful to
      * enable to allow interactive tooltips (using `locked`)
@@ -132,6 +141,15 @@
       content?: HTMLAttributes<HTMLElement>;
     };
 
+    /**
+     * Portal the tooltip outside the chart DOM hierarchy to avoid overflow clipping.
+     * Pass `true` to portal to `.PortalTarget` or `document.body`, a string CSS selector,
+     * an HTMLElement, or `false` to disable.
+     *
+     * @default true
+     */
+    portal?: PortalOptions;
+
     /**
      * Optionally pass the chart's context to the tooltip to get
      * type inference for the data.
@@ -146,6 +164,7 @@
 <script lang="ts" generics="T = any">
   import { fade } from 'svelte/transition';
   import { cls } from '@layerstack/tailwind';
+  import { portal as portalAction } from '@layerstack/svelte-actions';
 
   import { isScaleBand } from '../../utils/scales.svelte.js';
   import { getChartContext } from '../../contexts/chart.js';
@@ -157,8 +176,10 @@
     anchor = 'top-left',
     classes = {},
     contained = 'container',
+    fadeDuration = 100,
     motion = 'spring',
     pointerEvents = false,
+    portal: portalProp = true,
     variant = 'default',
     x = 'pointer',
     xOffset = x === 'pointer' ? 10 : 0,
@@ -189,12 +210,23 @@
     return value + (align === 'end' ? -additionalOffset : additionalOffset) - alignOffset;
   }
 
+  const isPortaled = $derived(
+    typeof portalProp === 'boolean' ? portalProp : portalProp?.enabled !== false
+  );
+
   const positions = $derived.by(() => {
     // if no data or tooltip size is not known yet, return null
     if (!ctx.tooltip.data || tooltipWidth === null || tooltipHeight === null) {
       return { x: null, y: null };
     }
 
+    // When portaled, we need the container's viewport rect to convert coordinates
+    const containerRect = isPortaled ? ctx.containerRef?.getBoundingClientRect() : null;
+    // If portaled but container rect not available yet, bail
+    if (isPortaled && !containerRect) {
+      return { x: null, y: null };
+    }
+
     const xBandOffset = isScaleBand(ctx.xScale)
       ? ctx.xScale.step() / 2 - (ctx.xScale.padding() * ctx.xScale.step()) / 2
       : 0;
@@ -279,44 +311,75 @@
     rect.right = rect.left + tooltipWidth;
 
     if (contained === 'container') {
-      // Only attempt repositioning if not fixed (ie. `pointer`/`data`)
-      if (typeof x !== 'number') {
-        // Check if outside of container and swap align side accordingly
-        if ((xAlign === 'start' || xAlign === 'center') && rect.right > ctx.containerWidth) {
-          rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
-        }
-        if ((xAlign === 'end' || xAlign === 'center') && rect.left < ctx.padding.left) {
-          rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+      if (isPortaled && containerRect) {
+        // Containment in viewport coordinates
+        if (typeof x !== 'number') {
+          if (
+            (xAlign === 'start' || xAlign === 'center') &&
+            containerRect.left + rect.right > containerRect.right
+          ) {
+            rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+          }
+          if (
+            (xAlign === 'end' || xAlign === 'center') &&
+            containerRect.left + rect.left < containerRect.left + ctx.padding.left
+          ) {
+            rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+          }
         }
-      }
-      rect.right = rect.left + tooltipWidth;
+        rect.right = rect.left + tooltipWidth;
 
-      if (typeof y !== 'number') {
-        if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > ctx.containerHeight) {
-          rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+        if (typeof y !== 'number') {
+          if (
+            (yAlign === 'start' || yAlign === 'center') &&
+            containerRect.top + rect.bottom > containerRect.bottom
+          ) {
+            rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+          }
+          if (
+            (yAlign === 'end' || yAlign === 'center') &&
+            containerRect.top + rect.top < containerRect.top + ctx.padding.top
+          ) {
+            rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+          }
         }
-        if ((yAlign === 'end' || yAlign === 'center') && rect.top < ctx.padding.top) {
-          rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+        rect.bottom = rect.top + tooltipHeight;
+      } else {
+        // Original non-portaled container containment
+        if (typeof x !== 'number') {
+          // Check if outside of container and swap align side accordingly
+          if ((xAlign === 'start' || xAlign === 'center') && rect.right > ctx.containerWidth) {
+            rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+          }
+          if ((xAlign === 'end' || xAlign === 'center') && rect.left < ctx.padding.left) {
+            rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+          }
+        }
+        rect.right = rect.left + tooltipWidth;
+
+        if (typeof y !== 'number') {
+          if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > ctx.containerHeight) {
+            rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+          }
+          if ((yAlign === 'end' || yAlign === 'center') && rect.top < ctx.padding.top) {
+            rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+          }
         }
+        rect.bottom = rect.top + tooltipHeight;
       }
-      rect.bottom = rect.top + tooltipHeight;
     } else if (contained === 'window') {
-      // Check if outside of window / viewport and swap align side accordingly
-      // Root <div> won't be available on initial mount
-      if (rootRef?.parentElement) {
-        const parentViewportRect = rootRef.parentElement.getBoundingClientRect();
-
-        // Only attempt repositioning if not fixed (ie. `pointer`/`data`)
+      if (isPortaled && containerRect) {
+        // Already in viewport coordinates, just clamp to window
         if (typeof x !== 'number') {
           if (
             (xAlign === 'start' || xAlign === 'center') &&
-            parentViewportRect.left + rect.right > window.innerWidth
+            containerRect.left + rect.right > window.innerWidth
           ) {
             rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
           }
           if (
             (xAlign === 'end' || xAlign === 'center') &&
-            parentViewportRect.left + rect.left < 0
+            containerRect.left + rect.left < 0
           ) {
             rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
           }
@@ -326,20 +389,67 @@
         if (typeof y !== 'number') {
           if (
             (yAlign === 'start' || yAlign === 'center') &&
-            parentViewportRect.top + rect.bottom > window.innerHeight
+            containerRect.top + rect.bottom > window.innerHeight
           ) {
             rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
           }
-          if ((yAlign === 'end' || yAlign === 'center') && parentViewportRect.top + rect.top < 0) {
+          if (
+            (yAlign === 'end' || yAlign === 'center') &&
+            containerRect.top + rect.top < 0
+          ) {
             rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
           }
         }
         rect.bottom = rect.top + tooltipHeight;
+      } else {
+        // Original non-portaled window containment
+        // Root <div> won't be available on initial mount
+        if (rootRef?.parentElement) {
+          const parentViewportRect = rootRef.parentElement.getBoundingClientRect();
+
+          // Only attempt repositioning if not fixed (ie. `pointer`/`data`)
+          if (typeof x !== 'number') {
+            if (
+              (xAlign === 'start' || xAlign === 'center') &&
+              parentViewportRect.left + rect.right > window.innerWidth
+            ) {
+              rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+            }
+            if (
+              (xAlign === 'end' || xAlign === 'center') &&
+              parentViewportRect.left + rect.left < 0
+            ) {
+              rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+            }
+          }
+          rect.right = rect.left + tooltipWidth;
+
+          if (typeof y !== 'number') {
+            if (
+              (yAlign === 'start' || yAlign === 'center') &&
+              parentViewportRect.top + rect.bottom > window.innerHeight
+            ) {
+              rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+            }
+            if (
+              (yAlign === 'end' || yAlign === 'center') &&
+              parentViewportRect.top + rect.top < 0
+            ) {
+              rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+            }
+          }
+          rect.bottom = rect.top + tooltipHeight;
+        }
       }
     }
+
+    // When portaled, convert from container-relative to viewport-relative coordinates
+    const offsetX = isPortaled && containerRect ? containerRect.left : 0;
+    const offsetY = isPortaled && containerRect ? containerRect.top : 0;
+
     return {
-      x: rect.left,
-      y: rect.top,
+      x: rect.left + offsetX,
+      y: rect.top + offsetY,
     };
   });
 
@@ -356,11 +466,13 @@
 {#if ctx.tooltip.data}
   <div
     {...props.root}
+    use:portalAction={portalProp}
     class={cls('lc-tooltip-root', classes.root, props.root?.class)}
     class:disablePointerEvents={pointerEvents === false}
+    class:portaled={isPortaled}
     style:top="{motionY.current}px"
     style:left="{motionX.current}px"
-    transition:fade={{ duration: 100 }}
+    transition:fade={{ duration: fadeDuration }}
     bind:clientWidth={tooltipWidth}
     bind:clientHeight={tooltipHeight}
     bind:this={rootRef}
@@ -392,6 +504,10 @@
       z-index: 50;
       user-select: none;
 
+      &.portaled {
+        position: fixed;
+      }
+
       &.disablePointerEvents {
         pointer-events: none;
       }

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
+import type { PortalOptions } from '@layerstack/svelte-actions';
 import type { Without } from '../../utils/types.js';
 import type { Placement } from '../types.js';
 export type Align = 'start' | 'center' | 'end';
@@ -41,6 +42,13 @@ export type TooltipPropsWithoutHTML<T = any> = {
      * @default "spring"
      */
     motion?: MotionProp;
+    /**
+     * Duration of the fade in/out transition in milliseconds.
+     * Set to `0` to disable the fade transition.
+     *
+     * @default 100
+     */
+    fadeDuration?: number;
     /**
      * Allow pointer events.  Disabled by default to reduce accidental selection, but useful to
      * enable to allow interactive tooltips (using `locked`)
@@ -115,6 +123,14 @@ export type TooltipPropsWithoutHTML<T = any> = {
          */
         content?: HTMLAttributes<HTMLElement>;
     };
+    /**
+     * Portal the tooltip outside the chart DOM hierarchy to avoid overflow clipping.
+     * Pass `true` to portal to `.PortalTarget` or `document.body`, a string CSS selector,
+     * an HTMLElement, or `false` to disable.
+     *
+     * @default true
+     */
+    portal?: PortalOptions;
     /**
      * Optionally pass the chart's context to the tooltip to get
      * type inference for the data.

package/dist/components/tooltip/Tooltip.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/tooltip/Tooltip.svelte.test.js

@@ -0,0 +1,294 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import LineChart from '../charts/LineChart.svelte';
+const data = [
+    { date: 0, value: 10 },
+    { date: 1, value: 30 },
+    { date: 2, value: 20 },
+    { date: 3, value: 50 },
+    { date: 4, value: 40 },
+];
+const baseProps = {
+    data,
+    x: 'date',
+    y: 'value',
+    height: 300,
+    width: 400,
+    tooltipContext: { mode: 'bisect-x' },
+};
+/** Dispatch pointer events to trigger the tooltip on a given element */
+function triggerTooltip(el, position) {
+    const rect = el.getBoundingClientRect();
+    const eventInit = {
+        bubbles: true,
+        clientX: position?.clientX ?? rect.x + rect.width / 2,
+        clientY: position?.clientY ?? rect.y + rect.height / 2,
+    };
+    el.dispatchEvent(new PointerEvent('pointerenter', eventInit));
+    el.dispatchEvent(new PointerEvent('pointermove', eventInit));
+}
+describe('Tooltip', () => {
+    describe('portal', () => {
+        it('should portal tooltip to body by default', async () => {
+            const { container } = render(LineChart, {
+                props: baseProps,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                // Tooltip root should be portaled to body (outside the chart container)
+                const tooltipInBody = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipInBody).not.toBeNull();
+                // Should use fixed positioning when portaled
+                const style = getComputedStyle(tooltipInBody);
+                expect(style.position).toBe('fixed');
+            });
+        });
+        it('should render tooltip inline when portal is false', async () => {
+            const { container } = render(LineChart, {
+                props: {
+                    ...baseProps,
+                    props: { tooltip: { root: { portal: false } } },
+                },
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                // Tooltip root should be inside the chart container
+                const tooltipInContainer = container.querySelector('.lc-tooltip-root');
+                expect(tooltipInContainer).not.toBeNull();
+                // Should use absolute positioning when not portaled
+                const style = getComputedStyle(tooltipInContainer);
+                expect(style.position).toBe('absolute');
+            });
+        });
+        it('should portal tooltip to a custom selector target', async () => {
+            // Create a custom portal target
+            const portalTarget = document.createElement('div');
+            portalTarget.className = 'custom-portal-target';
+            document.body.appendChild(portalTarget);
+            try {
+                const { container } = render(LineChart, {
+                    props: {
+                        ...baseProps,
+                        props: { tooltip: { root: { portal: { target: '.custom-portal-target' } } } },
+                    },
+                });
+                const tooltipCtx = container.querySelector('.lc-tooltip-context');
+                await expect.element(tooltipCtx).toBeInTheDocument();
+                triggerTooltip(tooltipCtx);
+                await vi.waitFor(() => {
+                    const tooltipInTarget = portalTarget.querySelector('.lc-tooltip-root');
+                    expect(tooltipInTarget).not.toBeNull();
+                });
+            }
+            finally {
+                portalTarget.remove();
+            }
+        });
+        it('should show tooltip content when portaled', async () => {
+            const { container } = render(LineChart, {
+                props: baseProps,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const tooltipRoot = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipRoot).not.toBeNull();
+                // Should contain tooltip content (items from default tooltip)
+                const tooltipItems = tooltipRoot.querySelectorAll('.lc-tooltip-item-root');
+                expect(tooltipItems.length).toBeGreaterThan(0);
+            });
+        });
+        it('should have numeric top and left styles when portaled', async () => {
+            const { container } = render(LineChart, {
+                props: baseProps,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const tooltipRoot = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipRoot).not.toBeNull();
+                // Should have valid pixel positions (not NaN or empty)
+                const top = tooltipRoot.style.top;
+                const left = tooltipRoot.style.left;
+                expect(top).toMatch(/^-?\d+(\.\d+)?px$/);
+                expect(left).toMatch(/^-?\d+(\.\d+)?px$/);
+            });
+        });
+    });
+    describe('contained="container" (default)', () => {
+        it('should flip tooltip left when pointer is near the right edge', async () => {
+            const { container } = render(LineChart, {
+                props: baseProps,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            const ctxRect = tooltipCtx.getBoundingClientRect();
+            // Trigger near the right edge of the container
+            triggerTooltip(tooltipCtx, {
+                clientX: ctxRect.right - 5,
+                clientY: ctxRect.top + ctxRect.height / 2,
+            });
+            await vi.waitFor(() => {
+                const tooltipRoot = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipRoot).not.toBeNull();
+                const tooltipLeft = parseFloat(tooltipRoot.style.left);
+                // Tooltip should be positioned to the LEFT of the pointer (flipped),
+                // so its left edge should be less than the pointer position
+                expect(tooltipLeft).toBeLessThan(ctxRect.right - 5);
+                // And specifically, the tooltip's right edge should not exceed the container
+                expect(tooltipLeft + tooltipRoot.offsetWidth).toBeLessThanOrEqual(ctxRect.right + 1);
+            });
+        });
+        it('should flip tooltip right when pointer is near the left edge', async () => {
+            const { container } = render(LineChart, {
+                props: {
+                    ...baseProps,
+                    props: { tooltip: { root: { anchor: 'top-right' } } },
+                },
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            const ctxRect = tooltipCtx.getBoundingClientRect();
+            // Trigger near the left edge of the container
+            triggerTooltip(tooltipCtx, {
+                clientX: ctxRect.left + 5,
+                clientY: ctxRect.top + ctxRect.height / 2,
+            });
+            await vi.waitFor(() => {
+                const tooltipRoot = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipRoot).not.toBeNull();
+                const tooltipLeft = parseFloat(tooltipRoot.style.left);
+                // Tooltip should be positioned to the RIGHT of the pointer (flipped),
+                // so its left edge should be >= the container's left edge
+                expect(tooltipLeft).toBeGreaterThanOrEqual(ctxRect.left - 1);
+            });
+        });
+        it('should flip tooltip up when pointer is near the bottom edge', async () => {
+            const { container } = render(LineChart, {
+                props: baseProps,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            const ctxRect = tooltipCtx.getBoundingClientRect();
+            // Trigger near the bottom edge of the container
+            triggerTooltip(tooltipCtx, {
+                clientX: ctxRect.left + ctxRect.width / 2,
+                clientY: ctxRect.bottom - 5,
+            });
+            await vi.waitFor(() => {
+                const tooltipRoot = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipRoot).not.toBeNull();
+                const tooltipTop = parseFloat(tooltipRoot.style.top);
+                // Tooltip should be positioned ABOVE the pointer (flipped),
+                // so its bottom edge should not exceed the container
+                expect(tooltipTop + tooltipRoot.offsetHeight).toBeLessThanOrEqual(ctxRect.bottom + 1);
+            });
+        });
+        it('should flip tooltip down when pointer is near the top edge', async () => {
+            const { container } = render(LineChart, {
+                props: {
+                    ...baseProps,
+                    props: { tooltip: { root: { anchor: 'bottom-left' } } },
+                },
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            const ctxRect = tooltipCtx.getBoundingClientRect();
+            // Trigger near the top edge of the container
+            triggerTooltip(tooltipCtx, {
+                clientX: ctxRect.left + ctxRect.width / 2,
+                clientY: ctxRect.top + 5,
+            });
+            await vi.waitFor(() => {
+                const tooltipRoot = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipRoot).not.toBeNull();
+                const tooltipTop = parseFloat(tooltipRoot.style.top);
+                // Tooltip should be positioned BELOW the pointer (flipped),
+                // so its top edge should be >= the container's top
+                expect(tooltipTop).toBeGreaterThanOrEqual(ctxRect.top - 1);
+            });
+        });
+    });
+    describe('contained="window"', () => {
+        it('should flip tooltip left when it would overflow the right side of the viewport', async () => {
+            const { container } = render(LineChart, {
+                props: {
+                    ...baseProps,
+                    props: { tooltip: { root: { contained: 'window' } } },
+                },
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            const ctxRect = tooltipCtx.getBoundingClientRect();
+            // Trigger near the right edge of the container
+            triggerTooltip(tooltipCtx, {
+                clientX: ctxRect.right - 5,
+                clientY: ctxRect.top + ctxRect.height / 2,
+            });
+            await vi.waitFor(() => {
+                const tooltipRoot = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipRoot).not.toBeNull();
+                const tooltipLeft = parseFloat(tooltipRoot.style.left);
+                // Tooltip should not overflow the right side of the viewport
+                expect(tooltipLeft + tooltipRoot.offsetWidth).toBeLessThanOrEqual(window.innerWidth + 1);
+            });
+        });
+        it('should flip tooltip up when it would overflow the bottom of the viewport', async () => {
+            const { container } = render(LineChart, {
+                props: {
+                    ...baseProps,
+                    props: { tooltip: { root: { contained: 'window' } } },
+                },
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            const ctxRect = tooltipCtx.getBoundingClientRect();
+            // Trigger near the bottom edge of the container
+            triggerTooltip(tooltipCtx, {
+                clientX: ctxRect.left + ctxRect.width / 2,
+                clientY: ctxRect.bottom - 5,
+            });
+            await vi.waitFor(() => {
+                const tooltipRoot = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipRoot).not.toBeNull();
+                const tooltipTop = parseFloat(tooltipRoot.style.top);
+                // Tooltip should not overflow the bottom of the viewport
+                expect(tooltipTop + tooltipRoot.offsetHeight).toBeLessThanOrEqual(window.innerHeight + 1);
+            });
+        });
+    });
+    describe('contained={false}', () => {
+        it('should not constrain tooltip position', async () => {
+            const { container } = render(LineChart, {
+                props: {
+                    ...baseProps,
+                    props: { tooltip: { root: { contained: false } } },
+                },
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            const ctxRect = tooltipCtx.getBoundingClientRect();
+            // Trigger near the right edge — tooltip should NOT flip
+            triggerTooltip(tooltipCtx, {
+                clientX: ctxRect.right - 5,
+                clientY: ctxRect.top + ctxRect.height / 2,
+            });
+            await vi.waitFor(() => {
+                const tooltipRoot = document.body.querySelector('.lc-tooltip-root');
+                expect(tooltipRoot).not.toBeNull();
+                const tooltipLeft = parseFloat(tooltipRoot.style.left);
+                // With default anchor='top-left', tooltip is placed to the right of pointer.
+                // Since contained=false, the tooltip left should be near/past the pointer x
+                // (i.e., it doesn't flip like contained="container" would)
+                const pointerViewportX = ctxRect.right - 5;
+                expect(tooltipLeft).toBeGreaterThanOrEqual(pointerViewportX - 1);
+            });
+        });
+    });
+});

package/package.json

@@ -5,12 +5,12 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.53",
+  "version": "2.0.0-next.54",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "^2.57.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
@@ -33,19 +33,19 @@
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/d3-shape": "^3.1.8",
     "@types/d3-time": "^3.0.4",
-    "@vitest/browser": "^4.1.0",
-    "@vitest/browser-playwright": "^4.1.0",
-    "@vitest/ui": "^4.1.0",
-    "playwright": "^1.58.2",
-    "prettier": "^3.8.1",
+    "@vitest/browser": "^4.1.4",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/ui": "^4.1.4",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.2",
     "prettier-plugin-svelte": "^3.5.1",
-    "svelte": "5.54.1",
-    "svelte-check": "^4.4.5",
-    "svelte2tsx": "^0.7.52",
+    "svelte": "5.55.3",
+    "svelte-check": "^4.4.6",
+    "svelte2tsx": "^0.7.53",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.1",
-    "vitest": "^4.1.0",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4",
     "vitest-browser-svelte": "^2.1.0"
   },
   "type": "module",