layerchart 2.0.0-next.0 → 2.0.0-next.2

package/dist/components/tooltip/TooltipContext.svelte

@@ -1,8 +1,9 @@
-<script lang="ts" context="module">
-  import { getContext, setContext } from 'svelte';
-  import type { Readable } from 'svelte/store';
+<script lang="ts" module>
+  import { Context } from 'runed';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Without } from '../../utils/types.js';
 
-  export const tooltipContextKey = Symbol();
+  const _TooltipContext = new Context<TooltipContextValue>('TooltipContext');
 
   type TooltipMode =
     | 'bisect-x'
@@ -14,124 +15,214 @@
     | 'quadtree'
     | 'manual';
 
-  export type TooltipContextValue = {
+  export type TooltipContextValue<T = any> = {
     x: number;
     y: number;
-    data: any;
-    show(e: PointerEvent, tooltipData?: any): void;
+    data: T | null;
+    payload: TooltipPayload[];
+    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
     hide(e?: PointerEvent): void;
     mode: TooltipMode;
+    isHoveringTooltipArea: boolean;
+    isHoveringTooltipContent: boolean;
   };
 
-  export type TooltipContext = Readable<TooltipContextValue>;
-
-  const defaultContext: TooltipContext = writable({
-    x: 0,
-    y: 0,
-    data: null as any,
-    show: () => {},
-    hide: () => {},
-    mode: 'manual',
-  });
-  export function tooltipContext() {
-    return getContext<TooltipContext>(tooltipContextKey) ?? defaultContext;
+  //   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(tooltip: TooltipContext) {
-    setContext(tooltipContextKey, tooltip);
+  function setTooltipContext<T = any>(tooltip: TooltipContextValue<T>) {
+    return _TooltipContext.set(tooltip) as TooltipContextValue<T>;
   }
+
+  type TooltipContextPropsWithoutHTML<T = any> = {
+    /**
+     * The tooltip interaction mode
+     * @default 'manual'
+     */
+    mode?: TooltipMode;
+
+    /**
+     * Method to find tooltip data
+     * @default 'closest'
+     */
+    findTooltipData?: 'closest' | 'left' | 'right';
+
+    /**
+     * Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so
+     * to be the top-most element
+     * @default false
+     */
+    raiseTarget?: boolean;
+
+    /**
+     * Lock tooltip (keep open, do not update on mouse movement). Allows for clicking on tooltip
+     * @default false
+     */
+    locked?: boolean;
+
+    /**
+     * quadtree search radius
+     * @default Infinity
+     */
+    radius?: number;
+
+    /**
+     * Enable debug view (show hit targets, etc)
+     * @default false
+     */
+    debug?: boolean;
+
+    /**
+     * Click handler for the tooltip
+     * @default () => {}
+     */
+    onclick?: (e: MouseEvent, { data }: { data: any }) => any;
+
+    /**
+     * Exposed to allow binding in Chart
+     * @default { x: 0, y: 0, data: null, show: showTooltip, hide: hideTooltip, mode }
+     */
+    tooltipContext?: TooltipContextValue<T>;
+
+    /**
+     * Delay in ms before hiding tooltip
+     * @default 0
+     */
+    hideDelay?: number;
+
+    /**
+     * A reference to the tooltip container element.
+     *
+     * @bindable
+     */
+    ref?: HTMLElement;
+
+    children?: Snippet<[{ tooltipContext: TooltipContextValue<T> }]>;
+  };
+
+  export type TooltipContextProps<T = any> = TooltipContextPropsWithoutHTML<T> &
+    Without<HTMLAttributes<HTMLElement>, TooltipContextPropsWithoutHTML<T>>;
 </script>
 
-<script lang="ts">
-  import { raise } from 'layercake';
-  import { writable } from 'svelte/store';
+<script lang="ts" generics="TData = any">
   import { bisector, max, min } from 'd3-array';
   import { quadtree as d3Quadtree, type Quadtree } from 'd3-quadtree';
   import { sortFunc, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Svg from './../layout/Svg.svelte';
-  import { chartContext } from './../ChartContext.svelte';
+  import Arc from '../Arc.svelte';
   import ChartClipPath from './../ChartClipPath.svelte';
   import Voronoi from './../Voronoi.svelte';
 
-  import { isScaleBand, scaleInvert } from '../../utils/scales.js';
+  import { isScaleBand, 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 { getChartContext } from '../Chart.svelte';
+  import type { Snippet } from 'svelte';
+  import {
+    getTooltipMetaContext,
+    getTooltipPayload,
+    type TooltipPayload,
+  } from './tooltipMetaContext.js';
+  import { layerClass } from '../../utils/attributes.js';
+
+  const ctx = getChartContext<any>();
+
+  let {
+    ref: refProp = $bindable(),
+    debug = false,
+    findTooltipData = 'closest',
+    hideDelay = 0,
+    locked = false,
+    mode = 'manual',
+    onclick = () => {},
+    radius = Infinity,
+    raiseTarget = false,
+    tooltipContext: tooltipContextProp = $bindable() as TooltipContextValue<TData>,
+    children,
+  }: TooltipContextProps<TData> = $props();
+
+  let ref = $state<HTMLElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  let x = $state(0);
+  let y = $state(0);
+  let data = $state(null);
+  let payload = $state<TooltipPayload[]>([]);
 
-  const {
-    flatData,
-    x,
-    xScale,
-    xGet,
-    xRange,
-    y,
-    yScale,
-    yGet,
-    yRange,
-    width,
-    height,
-    containerWidth,
-    containerHeight,
-    padding,
-    radial,
-  } = chartContext<any>();
+  /**
+   * 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;
 
   /*
 		TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
 		- scaleTime / scaleLinear: bisect
-		- scaleTime / scaleLinear (multi/stack): bisect 
+		- scaleTime / scaleLinear (multi/stack): bisect
 		- scaleTime / scaleBand: bisect (or band)
 		- scaleTime (multi) / scaleBand: bounds (or possible band if not overlapping)
 		- scaleBand, scaleLinear: band (or bounds)
 		- scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
 		- scaleLinear, scaleLinear: voronoi (or quadtree)
 	*/
+  setTooltipContext(tooltipContext);
 
-  /**
-   * @type {'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual'}
-   */
-  export let mode: TooltipMode = 'manual';
-  /**
-   * @type {'closest' | 'left' | 'right'}
-   */
-  export let findTooltipData: 'closest' | 'left' | 'right' = 'closest';
-
-  /** Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so to be the top-most element */
-  export let raiseTarget = false;
-
-  /** Lock tooltip (keep open, do not update on mouse movement).  Allows for clicking on tooltip */
-  export let locked = false;
-
-  /** quadtree search radius
-   * @type {number}
-   */
-  export let radius: number = Infinity;
-  /** Enable debug view (show hit targets, etc) */
-  export let debug = false;
-
-  export let onclick: (e: MouseEvent, { data }: { data: any }) => any = () => {};
-
-  /** Exposed to allow binding in Chart */
-  export let tooltip = writable({
-    x: 0,
-    y: 0,
-    data: null as any,
-    show: showTooltip,
-    hide: hideTooltip,
-    mode,
-  });
-  setTooltipContext(tooltip);
-
-  /** Delay in ms before hiding tooltip */
-  export let hideDelay = 0;
+  let hideTimeoutId: ReturnType<typeof setTimeout>;
 
-  let isHoveringTooltip = false;
-  let hideTimeoutId: NodeJS.Timeout;
-  let tooltipContextNode: HTMLDivElement;
-
-  $: bisectX = bisector((d: any) => {
-    const value = $x(d);
+  const bisectX = bisector((d: any) => {
+    const value = ctx.x(d);
     if (Array.isArray(value)) {
       // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
       // Using first value.  Consider using average, max, etc
@@ -143,8 +234,8 @@
     }
   }).left;
 
-  $: bisectY = bisector((d: any) => {
-    const value = $y(d);
+  const bisectY = bisector((d: any) => {
+    const value = ctx.y(d);
     if (Array.isArray(value)) {
       // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
       // Using first value.  Consider using average, max, etc
@@ -188,15 +279,16 @@
       return;
     }
 
-    const containerNode = (e.target as Element).closest('.layercake-container')!;
+    const containerNode = (e.target as Element).closest('.lc-root-container')!;
     const point = localPoint(e, containerNode);
 
     if (
+      ref !== undefined &&
       tooltipData == null && // mode !== 'manual' but support annotations
-      (point.x < tooltipContextNode.offsetLeft ||
-        point.x > tooltipContextNode.offsetLeft + tooltipContextNode.offsetWidth ||
-        point.y < tooltipContextNode.offsetTop ||
-        point.y > tooltipContextNode.offsetTop + tooltipContextNode.offsetHeight)
+      (point.x < ref.offsetLeft ||
+        point.x > ref.offsetLeft + ref.offsetWidth ||
+        point.y < ref.offsetTop ||
+        point.y > ref.offsetTop + ref.offsetHeight)
     ) {
       // Ignore if within padding of chart
       hideTooltip();
@@ -209,55 +301,55 @@
       switch (mode) {
         case 'bisect-x': {
           let xValueAtPoint: any;
-          if ($radial) {
+          if (ctx.radial) {
             // Assume radial is always centered
-            const { radians } = cartesianToPolar(point.x - $width / 2, point.y - $height / 2);
-            xValueAtPoint = scaleInvert($xScale, radians);
+            const { radians } = cartesianToPolar(point.x - ctx.width / 2, point.y - ctx.height / 2);
+            xValueAtPoint = scaleInvert(ctx.xScale, radians);
           } else {
-            xValueAtPoint = scaleInvert($xScale, point.x - $padding.left);
+            xValueAtPoint = scaleInvert(ctx.xScale, point.x - ctx.padding.left);
           }
 
-          const index = bisectX($flatData, xValueAtPoint, 1);
-          const previousValue = $flatData[index - 1];
-          const currentValue = $flatData[index];
-          tooltipData = findData(previousValue, currentValue, xValueAtPoint, $x);
+          const index = bisectX(ctx.flatData, xValueAtPoint, 1);
+          const previousValue = ctx.flatData[index - 1];
+          const currentValue = ctx.flatData[index];
+          tooltipData = findData(previousValue, currentValue, xValueAtPoint, ctx.x);
           break;
         }
 
         case 'bisect-y': {
           // `y` value at pointer coordinate
-          const yValueAtPoint = scaleInvert($yScale, point.y - $padding.top);
+          const yValueAtPoint = scaleInvert(ctx.yScale, point.y - ctx.padding.top);
 
-          const index = bisectY($flatData, yValueAtPoint, 1);
-          const previousValue = $flatData[index - 1];
-          const currentValue = $flatData[index];
-          tooltipData = findData(previousValue, currentValue, yValueAtPoint, $y);
+          const index = bisectY(ctx.flatData, yValueAtPoint, 1);
+          const previousValue = ctx.flatData[index - 1];
+          const currentValue = ctx.flatData[index];
+          tooltipData = findData(previousValue, currentValue, yValueAtPoint, ctx.y);
           break;
         }
 
         case 'bisect-band': {
           // `x` and `y` values at pointer coordinate
-          const xValueAtPoint = scaleInvert($xScale, point.x);
-          const yValueAtPoint = scaleInvert($yScale, point.y);
+          const xValueAtPoint = scaleInvert(ctx.xScale, point.x);
+          const yValueAtPoint = scaleInvert(ctx.yScale, point.y);
 
-          if (isScaleBand($xScale)) {
+          if (isScaleBand(ctx.xScale)) {
             // Find point closest to pointer within the x band
-            const bandData = $flatData
-              .filter((d) => $x(d) === xValueAtPoint)
-              .sort(sortFunc($y as () => any)); // sort for bisect
+            const bandData = ctx.flatData
+              .filter((d) => ctx.x(d) === xValueAtPoint)
+              .sort(sortFunc(ctx.y as () => any)); // sort for bisect
             const index = bisectY(bandData, yValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
-            tooltipData = findData(previousValue, currentValue, yValueAtPoint, $y);
-          } else if (isScaleBand($yScale)) {
+            tooltipData = findData(previousValue, currentValue, yValueAtPoint, ctx.y);
+          } else if (isScaleBand(ctx.yScale)) {
             // Find point closest to pointer within the y band
-            const bandData = $flatData
-              .filter((d) => $y(d) === yValueAtPoint)
-              .sort(sortFunc($x as () => any)); // sort for bisect
+            const bandData = ctx.flatData
+              .filter((d) => ctx.y(d) === yValueAtPoint)
+              .sort(sortFunc(ctx.x as () => any)); // sort for bisect
             const index = bisectX(bandData, xValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
-            tooltipData = findData(previousValue, currentValue, xValueAtPoint, $x);
+            tooltipData = findData(previousValue, currentValue, xValueAtPoint, ctx.x);
           } else {
             // TODO: Support `bisect-band` without band?  Fallback to bisect?
           }
@@ -265,7 +357,7 @@
         }
 
         case 'quadtree': {
-          tooltipData = quadtree.find(point.x, point.y, radius);
+          tooltipData = quadtree?.find(point.x, point.y, radius);
           break;
         }
       }
@@ -276,12 +368,12 @@
         raise(e.target as Element);
       }
 
-      $tooltip = {
-        ...$tooltip,
-        x: point.x,
-        y: point.y,
-        data: tooltipData,
-      };
+      const payloadData = getTooltipPayload({ ctx, tooltipData, metaCtx });
+
+      x = point.x;
+      y = point.y;
+      data = tooltipData;
+      payload = payloadData;
     } else {
       // Hide tooltip if unable to locate
       hideTooltip();
@@ -294,149 +386,162 @@
       return;
     }
 
-    // Wait an event loop tick in case `showTooltip` is called immediately on another element, to allow tweeneing (ex. moving between bands/bars)
+    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 (!isHoveringTooltip) {
-        $tooltip = { ...$tooltip, data: null };
+      if (!isHoveringTooltipArea && !isHoveringTooltipContent) {
+        data = null;
+        payload = [];
       }
     }, hideDelay);
   }
 
-  let quadtree: Quadtree<[number, number]>;
-  $: if (mode === 'quadtree') {
-    quadtree = d3Quadtree()
-      .extent([
-        [0, 0],
-        [$width, $height],
-      ])
-      .x((d) => {
-        const value = $xGet(d);
-
-        if (Array.isArray(value)) {
-          // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-          // Using first value.  Consider using average, max, etc
-          // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
-          // return midpoint;
-          return min(value);
-        } else {
-          return value;
-        }
-      })
-      .y((d) => {
-        const value = $yGet(d);
-
-        if (Array.isArray(value)) {
-          // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-          // Using first value.  Consider using average, max, etc
-          // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
-          // return midpoint;
-          return min(value);
-        } else {
-          return value;
-        }
-      })
-      .addAll($flatData as [number, number][]);
-  }
+  const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
+    if (mode === 'quadtree') {
+      return d3Quadtree()
+        .extent([
+          [0, 0],
+          [ctx.width, ctx.height],
+        ])
+        .x((d) => {
+          const value = ctx.xGet(d);
+
+          if (Array.isArray(value)) {
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+            // Using first value.  Consider using average, max, etc
+            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
+            // return midpoint;
+            return min(value);
+          } else {
+            return value;
+          }
+        })
+        .y((d) => {
+          const value = ctx.yGet(d);
+
+          if (Array.isArray(value)) {
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+            // Using first value.  Consider using average, max, etc
+            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
+            // return midpoint;
+            return min(value);
+          } else {
+            return value;
+          }
+        })
+        .addAll(ctx.flatData as [number, number][]);
+    }
+  });
 
-  let rects: Array<{ x: number; y: number; width: number; height: number; data: any }> = [];
-  $: if (mode === 'bounds' || mode === 'band') {
-    // @ts-expect-error
-    rects = $flatData
-      .map((d) => {
-        const xValue = $xGet(d);
-        const yValue = $yGet(d);
-
-        const x = Array.isArray(xValue) ? xValue[0] : xValue;
-        const y = Array.isArray(yValue) ? yValue[0] : yValue;
-
-        const xOffset = isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0;
-        const yOffset = isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0;
-
-        // @ts-expect-error
-        const fullWidth = max($xRange) - min($xRange);
-        // @ts-expect-error
-        const fullHeight = max($yRange) - min($yRange);
-
-        if (mode === 'band') {
-          // full band width/height regardless of value
-          return {
-            x: isScaleBand($xScale) ? x - xOffset : min($xRange),
-            y: isScaleBand($yScale) ? y - yOffset : min($yRange),
-            width: isScaleBand($xScale) ? $xScale.step() : fullWidth,
-            height: isScaleBand($yScale) ? $yScale.step() : fullHeight,
-            data: d,
-          };
-        } else if (mode === 'bounds') {
-          return {
-            x: isScaleBand($xScale) || Array.isArray(xValue) ? x - xOffset : min($xRange),
-            // y: isScaleBand($yScale) || Array.isArray(yValue) ? y - yOffset : min($yRange),
-            y: y - yOffset,
-
-            width: Array.isArray(xValue)
-              ? xValue[1] - xValue[0]
-              : isScaleBand($xScale)
-                ? $xScale.step()
-                : min($xRange) + x,
-            height: Array.isArray(yValue)
-              ? yValue[1] - yValue[0]
-              : isScaleBand($yScale)
-                ? $yScale.step()
-                : // @ts-expect-error
-                  max($yRange) - y,
-            data: d,
-          };
-        }
-      })
-      .sort(sortFunc('x'));
-  }
+  const rects: Array<{ x: number; y: number; width: number; height: number; data: any }> =
+    $derived.by(() => {
+      if (mode === 'bounds' || mode === 'band') {
+        return ctx.flatData
+          .map((d) => {
+            const xValue = ctx.xGet(d);
+            const yValue = ctx.yGet(d);
+
+            const x = Array.isArray(xValue) ? xValue[0] : xValue;
+            const y = Array.isArray(yValue) ? yValue[0] : yValue;
+
+            const xOffset = isScaleBand(ctx.xScale)
+              ? (ctx.xScale.padding() * ctx.xScale.step()) / 2
+              : 0;
+            const yOffset = isScaleBand(ctx.yScale)
+              ? (ctx.yScale.padding() * ctx.yScale.step()) / 2
+              : 0;
+
+            const fullWidth = max(ctx.xRange) - min(ctx.xRange);
+            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,
+              };
+            } else if (mode === 'bounds') {
+              return {
+                x: isScaleBand(ctx.xScale) || Array.isArray(xValue) ? x - xOffset : min(ctx.xRange),
+                // y: isScaleBand($yScale) || Array.isArray(yValue) ? y - yOffset : min($yRange),
+                y: y - yOffset,
+
+                width: Array.isArray(xValue)
+                  ? xValue[1] - xValue[0]
+                  : isScaleBand(ctx.xScale)
+                    ? ctx.xScale.step()
+                    : min(ctx.xRange) + x,
+                height: Array.isArray(yValue)
+                  ? yValue[1] - yValue[0]
+                  : isScaleBand(ctx.yScale)
+                    ? ctx.yScale.step()
+                    : max(ctx.yRange) - y,
+                data: d,
+              };
+            }
+          })
+          .filter((x) => x !== undefined) // make typescript happy
+          .sort(sortFunc('x'));
+      }
+      return [];
+    });
 
-  $: triggerPointerEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode);
+  const triggerPointerEvents = $derived(
+    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)
+  );
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  style:top="{$padding.top}px"
-  style:left="{$padding.left}px"
-  style:width="{$width}px"
-  style:height="{$height}px"
+  style:top="{ctx.padding.top}px"
+  style:left="{ctx.padding.left}px"
+  style:width="{ctx.width}px"
+  style:height="{ctx.height}px"
   class={cls(
-    'TooltipContext absolute touch-none',
+    layerClass('tooltip-context'),
+    'absolute touch-none',
     debug && triggerPointerEvents && 'bg-danger/10 outline outline-danger'
   )}
-  on:pointerenter={(e) => {
-    isHoveringTooltip = true;
+  onpointerenter={(e) => {
+    isHoveringTooltipArea = true;
     if (triggerPointerEvents) {
       showTooltip(e);
     }
   }}
-  on:pointermove={(e) => {
+  onpointermove={(e) => {
     if (triggerPointerEvents) {
       showTooltip(e);
     }
   }}
-  on:pointerleave={(e) => {
-    isHoveringTooltip = false;
+  onpointerleave={(e) => {
+    isHoveringTooltipArea = false;
+
     hideTooltip();
   }}
-  on:click={(e) => {
+  onclick={(e) => {
     // Ignore clicks without data (triggered from Legend clicks, for example)
-    if (triggerPointerEvents && $tooltip?.data != null) {
-      onclick(e, { data: $tooltip?.data });
+    if (triggerPointerEvents && tooltipContext.data != null) {
+      onclick(e, { data: tooltipContext.data });
     }
   }}
-  bind:this={tooltipContextNode}
+  onkeydown={() => {}}
+  bind:this={ref}
 >
   <!-- Rendering slot within TooltipContext to allow pointer events to bubble up (ex. Brush) -->
   <div
-    class="absolute"
-    style:top="-{$padding.top ?? 0}px"
-    style:left="-{$padding.left ?? 0}px"
-    style:width="{$containerWidth}px"
-    style:height="{$containerHeight}px"
+    class={cls(layerClass('tooltip-context-container'), 'absolute')}
+    style:top="-{ctx.padding.top ?? 0}px"
+    style:left="-{ctx.padding.left ?? 0}px"
+    style:width="{ctx.containerWidth}px"
+    style:height="{ctx.containerHeight}px"
   >
-    <slot tooltip={$tooltip} />
+    {@render children?.({ tooltipContext: tooltipContext })}
 
     {#if mode === 'voronoi'}
       <Svg>
@@ -447,7 +552,7 @@
           onpointermove={(e, { data }) => {
             showTooltip(e, data);
           }}
-          onpointerleave={hideTooltip}
+          onpointerleave={() => hideTooltip()}
           onpointerdown={(e) => {
             // @ts-expect-error
             if (e.target?.hasPointerCapture(e.pointerId)) {
@@ -462,45 +567,78 @@
         />
       </Svg>
     {:else if mode === 'bounds' || mode === 'band'}
-      <Svg>
-        <g class="tooltip-rects">
+      <Svg center={ctx.radial}>
+        <g class={layerClass('tooltip-rects-g')}>
           {#each rects as rect}
-            <rect
-              x={rect.x}
-              y={rect.y}
-              width={rect.width}
-              height={rect.height}
-              class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
-              on:pointerenter={(e) => showTooltip(e, rect.data)}
-              on:pointermove={(e) => showTooltip(e, rect.data)}
-              on:pointerleave={hideTooltip}
-              on:pointerdown={(e) => {
-                // @ts-expect-error
-                if (e.target?.hasPointerCapture(e.pointerId)) {
-                  // @ts-expect-error
-                  e.target.releasePointerCapture(e.pointerId);
-                }
-              }}
-              on:click={(e) => {
-                onclick(e, { data: rect.data });
-              }}
-            />
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            {#if ctx.radial}
+              <Arc
+                innerRadius={rect.y}
+                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'
+                )}
+                onpointerenter={(e) => showTooltip(e, rect?.data)}
+                onpointermove={(e) => showTooltip(e, rect?.data)}
+                onpointerleave={() => hideTooltip()}
+                onpointerdown={(e) => {
+                  const target = e.target as Element;
+                  if (target?.hasPointerCapture(e.pointerId)) {
+                    target.releasePointerCapture(e.pointerId);
+                  }
+                }}
+                onclick={(e) => {
+                  onclick(e, { data: rect?.data });
+                }}
+              />
+            {:else}
+              <rect
+                x={rect?.x}
+                y={rect?.y}
+                width={rect?.width}
+                height={rect?.height}
+                class={cls(
+                  layerClass('tooltip-rect'),
+                  debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
+                )}
+                onpointerenter={(e) => showTooltip(e, rect?.data)}
+                onpointermove={(e) => showTooltip(e, rect?.data)}
+                onpointerleave={() => hideTooltip()}
+                onpointerdown={(e) => {
+                  const target = e.target as Element;
+                  if (target?.hasPointerCapture(e.pointerId)) {
+                    target.releasePointerCapture(e.pointerId);
+                  }
+                }}
+                onclick={(e) => {
+                  onclick(e, { data: rect?.data });
+                }}
+              />
+            {/if}
           {/each}
         </g>
       </Svg>
     {:else if mode === 'quadtree' && debug}
       <Svg pointerEvents={false}>
         <ChartClipPath>
-          <g class="tooltip-quadtree">
-            {#each quadtreeRects(quadtree, false) as rect}
-              <rect
-                x={rect.x}
-                y={rect.y}
-                width={rect.width}
-                height={rect.height}
-                class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
-              />
-            {/each}
+          <g class={layerClass('tooltip-quadtree-g')}>
+            {#if quadtree}
+              {#each quadtreeRects(quadtree, false) as rect}
+                <rect
+                  x={rect.x}
+                  y={rect.y}
+                  width={rect.width}
+                  height={rect.height}
+                  class={cls(
+                    layerClass('tooltip-quadtree-rect'),
+                    debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
+                  )}
+                />
+              {/each}
+            {/if}
           </g>
         </ChartClipPath>
       </Svg>