layerchart 2.0.0-next.5 → 2.0.0-next.50

package/dist/components/tooltip/TooltipContext.svelte

@@ -1,50 +1,20 @@
 <script lang="ts" module>
-  import { Context } from 'runed';
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { Without } from '../../utils/types.js';
+  import { asAny, type Without } from '../../utils/types.js';
+  import type { TooltipState as TooltipStateType } from '../../states/tooltip.svelte.js';
 
-  const _TooltipContext = new Context<TooltipContextValue>('TooltipContext');
-
-  type TooltipMode =
-    | 'bisect-x'
-    | 'bisect-y'
+  export type TooltipMode =
+    | 'bisect-x' // requires values to be sorted
+    | 'bisect-y' // requires values to be sorted
     | 'band'
-    | 'bisect-band'
+    | 'bisect-band' // requires values to be sorted
     | 'bounds'
     | 'voronoi'
     | 'quadtree'
+    | 'quadtree-x' // ignores y values (constant 0)
+    | 'quadtree-y' // ignores x values (constant 0)
     | 'manual';
 
-  export type TooltipContextValue<T = any> = {
-    x: number;
-    y: number;
-    data: T | null;
-    payload: TooltipPayload[];
-    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
-    hide(e?: PointerEvent): void;
-    mode: TooltipMode;
-    isHoveringTooltipArea: boolean;
-    isHoveringTooltipContent: boolean;
-  };
-
-  //   const defaultContext = {
-  //     x: 0,
-  //     y: 0,
-  //     data: null as any,
-  //     payload: [],
-  //     show: () => {},
-  //     hide: () => {},
-  //     mode: 'manual',
-  //   } as TooltipContextValue;
-
-  export function getTooltipContext<T = any>() {
-    return _TooltipContext.get() as TooltipContextValue<T>;
-  }
-
-  function setTooltipContext<T = any>(tooltip: TooltipContextValue<T>) {
-    return _TooltipContext.set(tooltip) as TooltipContextValue<T>;
-  }
-
   type TooltipContextPropsWithoutHTML<T = any> = {
     /**
      * The tooltip interaction mode
@@ -71,6 +41,14 @@
      */
     locked?: boolean;
 
+    /**
+     * Controls the touch event behavior on the tooltip container.
+     * By default uses `pan-y` to allow verticle scrolling but horizontal scrubbing.
+     * Use `none` to disable all touch events (useful for improved transform/geo charts interactions)
+     * @default 'pan-y'
+     */
+    touchEvents?: 'none' | 'pan-x' | 'pan-y' | 'auto';
+
     /**
      * quadtree search or voronoi clip radius
      * @default Infinity
@@ -93,7 +71,7 @@
      * Exposed to allow binding in Chart
      * @default { x: 0, y: 0, data: null, show: showTooltip, hide: hideTooltip, mode }
      */
-    tooltipContext?: TooltipContextValue<T>;
+    state?: TooltipStateType<T>;
 
     /**
      * Delay in ms before hiding tooltip
@@ -108,7 +86,7 @@
      */
     ref?: HTMLElement;
 
-    children?: Snippet<[{ tooltipContext: TooltipContextValue<T> }]>;
+    children?: Snippet<[{ state: TooltipStateType<T> }]>;
   };
 
   export type TooltipContextProps<T = any> = TooltipContextPropsWithoutHTML<T> &
@@ -122,38 +100,37 @@
   import { sortFunc, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
-  import { getChartContext } from '../Chart.svelte';
-  import { getGeoContext } from '../GeoContext.svelte';
-  import Svg from './../layout/Svg.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import Svg from './../layers/Svg.svelte';
   import Arc from '../Arc.svelte';
   import ChartClipPath from './../ChartClipPath.svelte';
   import Voronoi from './../Voronoi.svelte';
 
-  import { isScaleBand, scaleInvert } from '../../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime, scaleInvert } from '../../utils/scales.svelte.js';
   import { cartesianToPolar } from '../../utils/math.js';
   import { quadtreeRects } from '../../utils/quadtree.js';
   import { raise } from '../../utils/chart.js';
-  import {
-    getTooltipMetaContext,
-    getTooltipPayload,
-    type TooltipPayload,
-  } from './tooltipMetaContext.js';
-  import { layerClass } from '../../utils/attributes.js';
+  import { TooltipState } from '../../states/tooltip.svelte.js';
+  import { accessor, findRelatedData } from '../../utils/common.js';
+  import { getSettings } from '../../contexts/settings.js';
 
   const ctx = getChartContext<any>();
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
+  const settings = getSettings();
 
   let {
     ref: refProp = $bindable(),
-    debug = false,
+    debug: debugProp,
     findTooltipData = 'closest',
     hideDelay = 0,
     locked = false,
+    touchEvents = 'pan-y',
     mode = 'manual',
     onclick = () => {},
     radius = Infinity,
     raiseTarget = false,
-    tooltipContext: tooltipContextProp = $bindable() as TooltipContextValue<TData>,
+    state: stateProp = $bindable() as TooltipStateType<TData>,
     children,
   }: TooltipContextProps<TData> = $props();
 
@@ -162,52 +139,10 @@
     refProp = ref;
   });
 
-  let x = $state(0);
-  let y = $state(0);
-  let data = $state(null);
-  let payload = $state<TooltipPayload[]>([]);
-
-  /**
-   * If we're hovering the tooltip area on the chart
-   */
-  let isHoveringTooltipArea = $state(false);
-
-  /**
-   * If we're hovering the tooltip content container
-   */
-  let isHoveringTooltipContent = $state(false);
-
-  const metaCtx = getTooltipMetaContext();
-
-  const tooltipContext: TooltipContextValue = {
-    get x() {
-      return x;
-    },
-    get y() {
-      return y;
-    },
-    get data() {
-      return data;
-    },
-    get payload() {
-      return payload;
-    },
-    show: showTooltip,
-    hide: hideTooltip,
-    get mode() {
-      return mode;
-    },
-    get isHoveringTooltipArea() {
-      return isHoveringTooltipArea;
-    },
-    get isHoveringTooltipContent() {
-      return isHoveringTooltipContent;
-    },
-    set isHoveringTooltipContent(value) {
-      isHoveringTooltipContent = value;
-    },
-  };
-  tooltipContextProp = tooltipContext;
+  const tooltipState = new TooltipState<TData>(mode, showTooltip, hideTooltip);
+  stateProp = tooltipState;
+
+  const debug = $derived(debugProp ?? settings.debug);
 
   /*
 		TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
@@ -219,7 +154,6 @@
 		- scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
 		- scaleLinear, scaleLinear: voronoi (or quadtree)
 	*/
-  setTooltipContext(tooltipContext);
 
   let hideTimeoutId: ReturnType<typeof setTimeout>;
 
@@ -270,7 +204,25 @@
     }
   }
 
-  function showTooltip(e: PointerEvent, tooltipData?: any) {
+  function resolveTooltipSeriesKey(series: any, seriesTooltipData: any) {
+    if (
+      mode === 'manual' &&
+      ctx.series.isDefaultSeries &&
+      series.key === 'default' &&
+      series.data == null &&
+      series.value != null &&
+      seriesTooltipData != null
+    ) {
+      const dataKey = ctx.c?.(seriesTooltipData);
+      if (typeof dataKey === 'string' || typeof dataKey === 'number') {
+        return `${dataKey}`;
+      }
+    }
+
+    return series.key;
+  }
+
+  function showTooltip(e: PointerEvent | MouseEvent | TouchEvent, tooltipData?: any) {
     // Cancel hiding tooltip if from previous event loop
     if (hideTimeoutId) {
       clearTimeout(hideTimeoutId);
@@ -284,6 +236,7 @@
     const containerNode = (e.target as Element).closest('.lc-root-container')!;
     const point = localPoint(e, containerNode);
 
+    // If pointer is outside of the chart area (ex. within padding), hide tooltip.  This prevents showing tooltip when interacting with axes, legends, etc.  For voronoi/quadtreemodes, this is handled by quadtree finding no point, but for bisect modes we need to check manually.
     if (
       ref !== undefined &&
       tooltipData == null && // mode !== 'manual' but support annotations
@@ -298,7 +251,6 @@
     }
 
     // If tooltipData not provided already (voronoi, etc), attempt to find it
-    // TODO: When using bisect-x/y/band, values should be sorted.  Typically they are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
       switch (mode) {
         case 'bisect-x': {
@@ -311,6 +263,7 @@
             xValueAtPoint = scaleInvert(ctx.xScale, point.x - ctx.padding.left);
           }
 
+          // Requires values to be sorted
           const index = bisectX(ctx.flatData, xValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -322,6 +275,7 @@
           // `y` value at pointer coordinate
           const yValueAtPoint = scaleInvert(ctx.yScale, point.y - ctx.padding.top);
 
+          // Requires values to be sorted
           const index = bisectY(ctx.flatData, yValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -331,14 +285,15 @@
 
         case 'bisect-band': {
           // `x` and `y` values at pointer coordinate
-          const xValueAtPoint = scaleInvert(ctx.xScale, point.x);
-          const yValueAtPoint = scaleInvert(ctx.yScale, point.y);
+          const xValueAtPoint = scaleInvert(ctx.xScale, point.x - ctx.padding.left);
+          const yValueAtPoint = scaleInvert(ctx.yScale, point.y - ctx.padding.top);
 
           if (isScaleBand(ctx.xScale)) {
             // Find point closest to pointer within the x band
             const bandData = ctx.flatData
               .filter((d) => ctx.x(d) === xValueAtPoint)
               .sort(sortFunc(ctx.y as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectY(bandData, yValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -348,6 +303,7 @@
             const bandData = ctx.flatData
               .filter((d) => ctx.y(d) === yValueAtPoint)
               .sort(sortFunc(ctx.x as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectX(bandData, xValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -358,12 +314,19 @@
           break;
         }
 
+        case 'quadtree-x':
+        case 'quadtree-y':
         case 'quadtree': {
-          tooltipData = quadtree?.find(
-            point.x - ctx.padding.left,
-            point.y - ctx.padding.top,
-            radius
-          );
+          let qx = point.x - ctx.padding.left;
+          let qy = point.y - ctx.padding.top;
+
+          // Apply inverse transform to convert screen coordinates to canvas coordinates
+          if (ctx.transform.mode === 'canvas') {
+            qx = (qx - ctx.transform.translate.x) / ctx.transform.scale;
+            qy = (qy - ctx.transform.translate.y) / ctx.transform.scale;
+          }
+
+          tooltipData = quadtree?.find(qx, qy, radius);
           break;
         }
       }
@@ -374,12 +337,56 @@
         raise(e.target as Element);
       }
 
-      const payloadData = getTooltipPayload({ ctx, tooltipData, metaCtx });
-
-      x = point.x;
-      y = point.y;
-      data = tooltipData;
-      payload = payloadData;
+      // For quadtree/voronoi modes, the tooltip finds a single specific point (by x+y proximity),
+      // so only the owning series should be matched. For bisect and quadtree-x/y modes,
+      // the tooltip finds by a single axis position and all series at that position should show values.
+      const isSinglePointMode = mode === 'quadtree' || mode === 'voronoi';
+      const series = ctx.series.series.map((s) => {
+        // Find related data point for this series (if series has its own data)
+        const seriesTooltipData = s.data
+          ? isSinglePointMode
+            ? tooltipData?.seriesKey != null
+              ? s.key === tooltipData.seriesKey
+                ? tooltipData
+                : undefined
+              : s.data.includes(tooltipData)
+                ? tooltipData
+                : undefined
+            : findRelatedData(s.data, tooltipData, ctx.x)
+          : tooltipData;
+
+        const valueAcc = accessor(
+          s.value ?? (s.data ? (ctx.props.y ?? ctx.props.x ?? asAny(ctx.y) ?? asAny(ctx.x)) : s.key)
+        );
+
+        // Extract value from the data
+        const value = seriesTooltipData ? valueAcc(seriesTooltipData) : undefined;
+
+        const seriesKey = resolveTooltipSeriesKey(s, seriesTooltipData);
+
+        // When user explicitly provides cScale, prefer scale-derived color (e.g. gradient encoding).
+        // Otherwise prefer series-defined color (e.g. BarChart with explicit series colors).
+        const scaleColor = ctx.cScale?.(ctx.c(tooltipData));
+        const color = ctx.props.cScale ? (scaleColor ?? s.color) : (s.color ?? scaleColor);
+
+        return {
+          key: seriesKey,
+          label: s.label ?? (seriesKey !== 'default' ? seriesKey : 'value'),
+          value: value,
+          color,
+          visible:
+            seriesKey === s.key
+              ? ctx.series.isVisible(s.key)
+              : ctx.series.selectedKeys.isEmpty() || ctx.series.selectedKeys.isSelected(seriesKey),
+          config: s,
+        };
+      });
+
+      tooltipState.x = point.x;
+      tooltipState.y = point.y;
+      tooltipState.data = tooltipData;
+      // Reverse series order for stacked charts to match visual stack order (bottom to top)
+      tooltipState.series = ctx.series.isStacked ? [...series].reverse() : series;
     } else {
       // Hide tooltip if unable to locate
       hideTooltip();
@@ -392,27 +399,30 @@
       return;
     }
 
-    isHoveringTooltipArea = false;
+    tooltipState.isHoveringTooltipArea = false;
 
     // Wait an event loop tick in case `showTooltip` is called immediately on another element,
     // to allow tweening (ex. moving between bands/bars)
     // Additional hideDelay can be configured to extend this delay further
     hideTimeoutId = setTimeout(() => {
-      if (!isHoveringTooltipArea && !isHoveringTooltipContent) {
-        data = null;
-        payload = [];
+      if (!tooltipState.isHoveringTooltipArea && !tooltipState.isHoveringTooltipContent) {
+        tooltipState.data = null;
       }
     }, hideDelay);
   }
 
   const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
-    if (mode === 'quadtree') {
+    if (['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)) {
       return d3Quadtree()
         .x((d) => {
-          if (geoCtx.projection) {
+          if (mode === 'quadtree-y') {
+            return 0;
+          }
+
+          if (geo.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
-            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            const geoValue = geo.projection([lat, long]) ?? [0, 0];
             return geoValue[0];
           }
 
@@ -429,10 +439,14 @@
           }
         })
         .y((d) => {
-          if (geoCtx.projection) {
+          if (mode === 'quadtree-x') {
+            return 0;
+          }
+
+          if (geo.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
-            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            const geoValue = geo.projection([lat, long]) ?? [0, 0];
             return geoValue[1];
           }
 
@@ -474,14 +488,111 @@
             const fullHeight = max(ctx.yRange) - min(ctx.yRange);
 
             if (mode === 'band') {
-              // full band width/height regardless of value
-              return {
-                x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
-                y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
-                width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
-                height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
-                data: d,
-              };
+              if (isScaleBand(ctx.xScale)) {
+                // full band width/height regardless of value
+                return {
+                  x: x - xOffset,
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: ctx.xScale.step(),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (isScaleBand(ctx.yScale)) {
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: y - yOffset,
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: ctx.yScale.step(),
+                  data: d,
+                };
+              } else if (ctx.xInterval) {
+                // x-axis time scale with interval
+                const xVal = ctx.x(d);
+                const start = ctx.xInterval.floor(xVal);
+                const end = ctx.xInterval.offset(start);
+                const xStart = ctx.xScale(start);
+                const xEnd = ctx.xScale(end);
+
+                return {
+                  x: Math.min(xStart, xEnd),
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: Math.abs(xEnd - xStart),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (ctx.yInterval) {
+                // y-axis time scale with interval
+                const yVal = ctx.y(d);
+                const start = ctx.yInterval.floor(yVal);
+                const end = ctx.yInterval.offset(start);
+                const yStart = ctx.yScale(start);
+                const yEnd = ctx.yScale(end);
+
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: Math.min(yStart, yEnd),
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: Math.abs(yEnd - yStart),
+                  data: d,
+                };
+              } else if (Array.isArray(xValue)) {
+                return {
+                  x: Math.min(xValue[0], xValue[1]) - xOffset,
+                  y: Array.isArray(yValue)
+                    ? Math.min(yValue[0], yValue[1]) - yOffset
+                    : min(ctx.yRange),
+                  width: Math.abs(xValue[1] - xValue[0]),
+                  height: Array.isArray(yValue) ? Math.abs(yValue[1] - yValue[0]) : fullHeight,
+                  data: d,
+                };
+              } else if (Array.isArray(yValue)) {
+                return {
+                  x: min(ctx.xRange),
+                  y: Math.min(yValue[0], yValue[1]) - yOffset,
+                  width: fullWidth,
+                  height: Math.abs(yValue[1] - yValue[0]),
+                  data: d,
+                };
+              } else if (isScaleTime(ctx.xScale)) {
+                // Find width to next data point
+                const index = ctx.flatData.findIndex(
+                  (d2) => Number(ctx.x(d2)) === Number(ctx.x(d))
+                );
+                const isLastPoint = index + 1 === ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                  ? max(ctx.xDomain)
+                  : ctx.x(ctx.flatData[index + 1]);
+
+                return {
+                  x: x - xOffset,
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: (ctx.xScale(nextDataPoint) ?? 0) - (xValue ?? 0),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (isScaleTime(ctx.yScale)) {
+                // Find height to next data point
+                const index = ctx.flatData.findIndex(
+                  (d2) => Number(ctx.y(d2)) === Number(ctx.y(d))
+                );
+                const isLastPoint = index + 1 === ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                  ? max(ctx.yDomain)
+                  : ctx.y(ctx.flatData[index + 1]);
+
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: y - yOffset,
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: (ctx.yScale(nextDataPoint) ?? 0) - (yValue ?? 0),
+                  data: d,
+                };
+              } else {
+                console.warn(
+                  '[layerchart] TooltipContext band mode requires at least one scale to be band or time.'
+                );
+                return undefined;
+              }
             } else if (mode === 'bounds') {
               return {
                 x: isScaleBand(ctx.xScale) || Array.isArray(xValue) ? x - xOffset : min(ctx.xRange),
@@ -509,41 +620,44 @@
     });
 
   const triggerPointerEvents = $derived(
-    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)
+    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)
   );
-</script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  style:top="{ctx.padding.top}px"
-  style:left="{ctx.padding.left}px"
-  style:width="{ctx.width}px"
-  style:height="{ctx.height}px"
-  class={cls(
-    layerClass('tooltip-context'),
-    'absolute touch-none',
-    debug && triggerPointerEvents && 'bg-danger/10 outline outline-danger'
-  )}
-  onpointerenter={(e) => {
-    isHoveringTooltipArea = true;
+  function onPointerEnter(e: PointerEvent | MouseEvent | TouchEvent) {
+    tooltipState.isHoveringTooltipArea = true;
     if (triggerPointerEvents) {
       showTooltip(e);
     }
-  }}
-  onpointermove={(e) => {
+  }
+
+  function onPointerMove(e: PointerEvent | MouseEvent | TouchEvent) {
     if (triggerPointerEvents) {
       showTooltip(e);
     }
-  }}
-  onpointerleave={(e) => {
-    isHoveringTooltipArea = false;
+  }
 
+  function onPointerLeave(e: PointerEvent | MouseEvent | TouchEvent) {
+    tooltipState.isHoveringTooltipArea = false;
     hideTooltip();
-  }}
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  style:top="{ctx.padding.top}px"
+  style:left="{ctx.padding.left}px"
+  style:width="{ctx.width}px"
+  style:height="{ctx.height}px"
+  style:--touch-action={touchEvents}
+  class="lc-tooltip-context"
+  class:debug={debug && triggerPointerEvents}
+  onpointerenter={onPointerEnter}
+  onpointermove={onPointerMove}
+  onpointerleave={onPointerLeave}
   onclick={(e) => {
     // Ignore clicks without data (triggered from Legend clicks, for example)
-    if (triggerPointerEvents && tooltipContext.data != null) {
-      onclick(e, { data: tooltipContext.data });
+    if (triggerPointerEvents && tooltipState.data != null) {
+      onclick(e, { data: tooltipState.data });
     }
   }}
   onkeydown={() => {}}
@@ -551,13 +665,13 @@
 >
   <!-- Rendering slot within TooltipContext to allow pointer events to bubble up (ex. Brush) -->
   <div
-    class={cls(layerClass('tooltip-context-container'), 'absolute')}
+    class="lc-tooltip-context-container"
     style:top="-{ctx.padding.top ?? 0}px"
     style:left="-{ctx.padding.left ?? 0}px"
     style:width="{ctx.containerWidth}px"
     style:height="{ctx.containerHeight}px"
   >
-    {@render children?.({ tooltipContext: tooltipContext })}
+    {@render children?.({ state: tooltipState })}
 
     {#if mode === 'voronoi'}
       <Svg>
@@ -580,12 +694,12 @@
           onclick={(e, { data }) => {
             onclick(e, { data });
           }}
-          classes={{ path: cls(debug && 'fill-danger/10 stroke-danger') }}
+          classes={{ path: cls('lc-tooltip-voronoi-path', debug && 'debug') }}
         />
       </Svg>
     {:else if mode === 'bounds' || mode === 'band'}
       <Svg center={ctx.radial}>
-        <g class={layerClass('tooltip-rects-g')}>
+        <g class="lc-tooltip-rects-g">
           {#each rects as rect}
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             {#if ctx.radial}
@@ -594,10 +708,7 @@
                 outerRadius={rect.y + rect.height}
                 startAngle={rect.x}
                 endAngle={rect.x + rect.width}
-                class={cls(
-                  layerClass('tooltip-rect'),
-                  debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
-                )}
+                class={cls('lc-tooltip-rect', debug && 'debug')}
                 onpointerenter={(e) => showTooltip(e, rect?.data)}
                 onpointermove={(e) => showTooltip(e, rect?.data)}
                 onpointerleave={() => hideTooltip()}
@@ -617,10 +728,7 @@
                 y={rect?.y}
                 width={rect?.width}
                 height={rect?.height}
-                class={cls(
-                  layerClass('tooltip-rect'),
-                  debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
-                )}
+                class={cls('lc-tooltip-rect', debug && 'debug')}
                 onpointerenter={(e) => showTooltip(e, rect?.data)}
                 onpointermove={(e) => showTooltip(e, rect?.data)}
                 onpointerleave={() => hideTooltip()}
@@ -638,10 +746,10 @@
           {/each}
         </g>
       </Svg>
-    {:else if mode === 'quadtree' && debug}
+    {:else if ['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode) && debug}
       <Svg pointerEvents={false}>
         <ChartClipPath>
-          <g class={layerClass('tooltip-quadtree-g')}>
+          <g class="lc-tooltip-quadtree-g">
             {#if quadtree}
               {#each quadtreeRects(quadtree, false) as rect}
                 <rect
@@ -649,10 +757,7 @@
                   y={rect.y}
                   width={rect.width}
                   height={rect.height}
-                  class={cls(
-                    layerClass('tooltip-quadtree-rect'),
-                    debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
-                  )}
+                  class={cls('lc-tooltip-quadtree-rect', debug && 'debug')}
                 />
               {/each}
             {/if}
@@ -662,3 +767,46 @@
     {/if}
   </div>
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-context-container) {
+      position: absolute;
+    }
+
+    :where(.lc-tooltip-context) {
+      position: absolute;
+      touch-action: var(--touch-action);
+
+      &.debug {
+        outline: 1px solid var(--color-danger);
+        background-color: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+
+    :global(:where(.lc-tooltip-voronoi-path)) {
+      &.debug {
+        stroke: var(--color-danger);
+        fill: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+
+    :where(.lc-tooltip-rect) {
+      fill: transparent;
+
+      &.debug {
+        stroke: var(--color-danger);
+        fill: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+
+    :where(.lc-tooltip-quadtree-rect) {
+      fill: transparent;
+
+      &.debug {
+        stroke: var(--color-danger);
+        fill: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+  }
+</style>