# ChartTooltip

> Floating card that lists every series at the hovered position.

Source: https://ui.jcsoftdev.com/docs/components/chart-tooltip

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/charts-primitives-charttooltip--default)
- [Flips Near The Right Edge](/storybook/?path=/story/charts-primitives-charttooltip--flips-near-the-right-edge)
- [Without Title](/storybook/?path=/story/charts-primitives-charttooltip--without-title)

## Source

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