# Tooltip

Tooltips that surface the values under the pointer as you hover a chart.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





## Usage [#usage]

Compose `<Tooltip />` inside a cartesian chart root. It reads the chart data and config from context, so no props are required for the default tooltip.

```tsx
import { ChartcnAreaChart } from "@/components/chart/area-chart";

<ChartcnAreaChart data={data} config={chartConfig} xDataKey="month">
  <ChartcnAreaChart.Tooltip variant="frosted-glass" roundness="md" />
  <ChartcnAreaChart.Area dataKey="desktop" />
</ChartcnAreaChart>;
```

## Variants [#variants]

Control the tooltip surface with the `variant` prop.

### Default [#default]

<ComponentPreview base="chartgpu" name="chart-ui-variants-demo" title="variant='default'">
  <ChartgpuTooltipVariantDemo />
</ComponentPreview>

### Frosted Glass [#frosted-glass]

<ComponentPreview base="chartgpu" name="chart-ui-variants-demo" title="variant='frosted-glass'">
  <ChartgpuTooltipVariantDemo variant="frosted-glass" />
</ComponentPreview>

## API Reference [#api-reference]

| Prop           | Type                           | Default     | Description                                |
| -------------- | ------------------------------ | ----------- | ------------------------------------------ |
| `variant`      | `"default" \| "frosted-glass"` | `"default"` | Visual style of the tooltip surface.       |
| `roundness`    | `"sm" \| "md" \| "lg" \| "xl"` | `"lg"`      | Corner radius of the tooltip container.    |
| `defaultIndex` | `number`                       | -           | Data index shown before the pointer moves. |

The heading comes from the active x-axis value. Series labels, icons, and colors come from `ChartConfig`. The vertical cursor and active dots stay synchronized with the hovered category.