# ChartTooltip - **Category:** Charts (`charts`) - **Slug:** `charts/chart-tooltip` - **Status:** stable - **Platforms:** web - **Import:** `import { ChartTooltip } from "@protocore/pds/charts";` - **Docs:** https://pds.protocore.io/components/charts/chart-tooltip > Custom recharts tooltip content — a surface-3 overlay with a mono label and per-series rows. ## Import path `ChartTooltip` ships from the **`@protocore/pds/charts`** subpath. It is the `content` render-prop for recharts' `` — recharts (>=3, the optional peer) injects `active`, `payload`, and `label`; you rarely construct these yourself. ```tsx import { ChartTooltip } from "@protocore/pds/charts"; ``` ## When to use it You mostly **don't** — the chart wrappers wire it in for you. Import it directly only when you compose a raw recharts chart and want the family-consistent tooltip: pass `content={}` to recharts' ``. It is the transient hover readout of exact values. Its persistent counterpart is [ChartLegend](/charts/chart-legend) (the always-visible series key); the surrounding frame is [ChartContainer](/charts/chart-container). Together they cover naming, framing, and inspecting a chart. ## Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `active` | `boolean` | no | — | Whether the tooltip is showing. Injected by recharts; renders nothing when false. | | `payload` | `ChartTooltipPayloadItem[]` | no | — | Per-series rows for the hovered point (recharts-injected). `ChartTooltipPayloadItem` = `{ name?: ReactNode; value?: number \| string; color?: string; dataKey?: string \| number }`. | | `label` | `React.ReactNode` | no | — | The x-axis label for the hovered point (recharts-injected). | ## Examples ### Wired in by default Every [LineChart](/charts/line-chart), [AreaChart](/charts/area-chart), and [BarChart](/charts/bar-chart) wrapper already passes `ChartTooltip` as its tooltip content — hover (or focus) a mark to see it. You only import the component directly when building a bespoke recharts chart outside the wrappers. ```tsx import { ChartContainer } from "@protocore/pds"; import { BarChart } from "@protocore/pds/charts"; // Every @protocore/pds/charts wrapper wires ChartTooltip in by default — hover a // bar to see it. Reach for the component directly only for a custom recharts setup. const data = [ { epoch: "e-4", rewards: 1.8 }, { epoch: "e-3", rewards: 2.1 }, { epoch: "e-2", rewards: 1.6 }, { epoch: "e-1", rewards: 2.4 }, { epoch: "e-0", rewards: 2.9 }, ]; export default function Demo() { return ( ); } ``` ### Resting appearance The panel is a surface-3 overlay (the one place a chart uses `--pds-shadow-overlay`): a mono x-axis `label` on top, then one swatch / series-name / value row per `payload` entry. This demo supplies the recharts-injected props by hand to show it in isolation. ```tsx import { ChartTooltip } from "@protocore/pds/charts"; // recharts injects `active`, `payload`, and `label` at hover; here they are // supplied by hand to show the tooltip's resting appearance. export default function Demo() { return ( ); } ``` ## Do & don't **Do** - Let the chart wrappers supply it — reach for the component only in custom recharts setups. - Pass it as `content={}` so recharts injects the live props. - Rely on the swatch `color` recharts mirrors from each series' stroke/fill. - Keep series `label`s meaningful — they surface as the tooltip row names. **Don't** - Don't hand-construct `active`/`payload` in production — that's recharts' job. - Don't restyle it away from the surface-3 overlay; it's the family readout. - Don't import it from `@protocore/pds`; it lives on the `/charts` subpath. - Don't use it as a persistent legend — pair charts with ChartLegend for that. ## Accessibility **Notes** - recharts shows the tooltip on hover and on keyboard focus of the plot, so values are reachable without a pointer. - Each row carries the series name and value as text; the swatch is `aria-hidden`, so meaning never rests on color alone. - The overlay uses `--pds-shadow-overlay` for separation from the plot beneath it — the sole shadow permitted in the charts family. ## Related `chart-legend`, `chart-container`, `line-chart`, `area-chart` --- © Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/