# Tooltip

> Show values for the chart point or category under the pointer.

Source: https://www.honestui.com/docs/charts/ui/tooltip

Chart tooltips provide supporting detail during pointer exploration. They are not a replacement for a visible summary, labels, or data table when exact values are required to understand the chart.

## Usage [#usage]

Add `<AreaChart.Tooltip />` as a child of the chart root. It reads the chart's data and config from the root, so the default tooltip needs no props.

```tsx
import { AreaChart } from "honestui/charts"

<AreaChart data={data} config={chartConfig}>
  <AreaChart.Tooltip variant="frosted-glass" roundness="md" position="fixed" />
</AreaChart>
```

The canvas tooltip opens from pointer interaction. If the values are required for comprehension or an action, expose them in persistent HTML as well.

## Variants [#variants]

Use `variant` to change the tooltip surface without changing its content.

### Default [#default]

### Default tooltip

```tsx
"use client";

import { BarChart, type ChartConfig } from "honestui/charts";

// Scenario: Rail freight
const data = [
  { month: "January", loaded: 367, unloaded: 130 },
  { month: "February", loaded: 854, unloaded: 285 },
  { month: "March", loaded: 541, unloaded: 195 },
  { month: "April", loaded: 656, unloaded: 251 },
  { month: "May", loaded: 471, unloaded: 218 },
  { month: "June", loaded: 769, unloaded: 258 },
  { month: "July", loaded: 436, unloaded: 161 },
  { month: "August", loaded: 919, unloaded: 323 },
  { month: "September", loaded: 639, unloaded: 239 },
  { month: "October", loaded: 547, unloaded: 241 },
  { month: "November", loaded: 800, unloaded: 289 },
  { month: "December", loaded: 337, unloaded: 121 },
];

const chartConfig = {
  loaded: {
    label: "Loaded",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  unloaded: {
    label: "Unloaded",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleBarChart() {
  return (
    <BarChart data={data} config={chartConfig} className="h-full w-full p-4">
      <BarChart.Grid />
      <BarChart.XAxis dataKey="month" tickFormatter={(value: string) => value.substring(0, 3)} />
      <BarChart.Legend />
      <BarChart.Tooltip
        variant="default" // [!code highlight]
        defaultIndex={4}
      />
      <BarChart.Bar dataKey="loaded" variant="default" />
      <BarChart.Bar dataKey="unloaded" variant="default" />
    </BarChart>
  );
}

```

### Frosted glass [#frosted-glass]

### Frosted-glass tooltip

```tsx
"use client";

import { BarChart, type ChartConfig } from "honestui/charts";

// Scenario: Bakery production
const data = [
  { month: "January", sold: 401, donated: 147 },
  { month: "February", sold: 935, donated: 326 },
  { month: "March", sold: 590, donated: 220 },
  { month: "April", sold: 715, donated: 284 },
  { month: "May", sold: 515, donated: 245 },
  { month: "June", sold: 842, donated: 295 },
  { month: "July", sold: 474, donated: 182 },
  { month: "August", sold: 1006, donated: 370 },
  { month: "September", sold: 700, donated: 271 },
  { month: "October", sold: 598, donated: 272 },
  { month: "November", sold: 875, donated: 332 },
  { month: "December", sold: 365, donated: 134 },
];

const chartConfig = {
  sold: {
    label: "Sold",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  donated: {
    label: "Donated",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleBarChart() {
  return (
    <BarChart data={data} config={chartConfig} className="h-full w-full p-4">
      <BarChart.Grid />
      <BarChart.XAxis dataKey="month" tickFormatter={(value: string) => value.substring(0, 3)} />
      <BarChart.Legend />
      <BarChart.Tooltip
        variant="frosted-glass" // [!code highlight]
        defaultIndex={4}
      />
      <BarChart.Bar dataKey="sold" variant="default" />
      <BarChart.Bar dataKey="donated" variant="default" />
    </BarChart>
  );
}

```

## API Reference [#api-reference]


  ### `variant`

type: `&#x22;default&#x22; | &#x22;frosted-glass&#x22;` · default: `&#x22;default&#x22;`

Visual style of the tooltip surface.

  ### `roundness`

type: `&#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;` · default: `&#x22;lg&#x22;`

Corner radius of the tooltip container.

  ### `position`

type: `&#x22;variable&#x22; | &#x22;fixed&#x22;` · default: `&#x22;variable&#x22;`

`variable` follows the pointer on both axes. `fixed` stays near the top and follows the active horizontal category.

  ### `cursor`

type: `boolean` · default: `true`

Shows the axis-pointer line for the active category.

  ### `defaultIndex`

type: `number`

Data index shown when the chart first renders, before pointer interaction.