Components
Tooltip
Configure tooltips for displaying data on hover
The <Tooltip> component displays data values when users hover over chart elements.
Add a tooltip
Place <Tooltip> inside any chart container:
<BarChart :width="500" :height="300" :data="data">
<Bar data-key="value" fill="#8884d8" />
<Tooltip />
</BarChart>
Customize tooltip content
Use the #content slot for full control:
<Tooltip>
<template #content="{ active, payload, label }">
<div v-if="active && payload?.length" class="bg-background border rounded p-2 shadow">
<p class="font-medium">{{ label }}</p>
<p v-for="entry in payload" :key="entry.dataKey" :style="{ color: entry.color }">
{{ entry.name }}: {{ entry.value }}
</p>
</div>
</template>
</Tooltip>
Pre-select a tooltip index
Use default-index to show a tooltip on initial render:
<Tooltip :default-index="1" />
Activate on click
<Tooltip trigger="click" />
Disable the cursor
<Tooltip :cursor="false" />
Tooltip props
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | — | Force active state |
defaultIndex | number | — | Pre-selected data index |
trigger | 'hover' | 'click' | 'hover' | Activation trigger |
shared | boolean | true | Show all series at index |
cursor | boolean | object | true | Show/customize cursor |
offset | number | — | Pixel offset from cursor |
includeHidden | boolean | false | Show hidden series data |
Tooltip slots
| Slot | Props | Description |
|---|---|---|
#content | { active, payload, label, coordinate } | Full tooltip content |
#cursor | — | Custom cursor element |