ChartTooltip

Floating card that lists every series at the hovered position. Purely visual (aria-hidden): screen readers get the same numbers from the live region and the hidden data table. Moves with a GPU transform, so following the pointer never triggers layout. Its own width is measured so the card always stays inside the container: it takes the side of the anchor with room, and is clamped to the edges when neither side fits (narrow charts).

Import

import { ChartTooltip } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/core.

Usage

<ChartTooltip
  x={120}
  y={80}
  containerWidth={420}
  title="Sábado 4 oct"
  rows={rows}
/>

Props

Prop	Type	Default	Description
x *	number		Anchor in pixels, relative to the positioned chart container.
y *	number
containerWidth *	number		Width of the container; the tooltip prefers the left of the anchor past 60% and never leaves it.
title	ReactNode
rows *	readonly TooltipRow[]
body	string		Wrapped sentence under the title, for notes that are not series values.
side	"left" | "right"		Forces the side of the anchor the card opens on (when it fits); by default it follows the anchor.
className	string

* marks a required prop.

Storybook stories

• Default
• Flips Near The Right Edge
• Without Title

Source

packages/ui/src/charts/core/tooltip.tsx