> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltip

> Displays a floating tooltip with data values

Displays a floating tooltip with data values when hovering over or clicking on chart elements. The Tooltip component renders an HTML element (not SVG) that follows the cursor or attaches to specific data points.

## Usage

```tsx theme={null}
import { LineChart, Line, Tooltip } from 'recharts';

<LineChart width={500} height={300} data={data}>
  <Line dataKey="uv" stroke="#8884d8" />
  <Tooltip />
</LineChart>
```

## Props

### Content

<ParamField path="content" type="ReactElement | function">
  Renders the content of the tooltip.

  This should return HTML elements, not SVG elements.

  Options:

  * Not set: Uses DefaultTooltipContent component
  * `ReactElement`: Element is cloned with extra props
  * `function`: Called to render HTML elements
</ParamField>

### Behavior

<ParamField path="trigger" type="'hover' | 'click'" default="hover">
  Controls when the tooltip appears.

  * `hover`: Shows on mouse enter, hides on mouse leave
  * `click`: Shows after clicking, stays active
</ParamField>

<ParamField path="shared" type="boolean">
  Defines whether the tooltip reacts to the current data point or all data points at the current axis coordinate.

  * `true`: Tooltip appears on top of all items at an axis tick
  * `false`: Tooltip appears on individual items

  Different chart types have different defaults and support.
</ParamField>

<ParamField path="active" type="boolean">
  Controls tooltip visibility.

  * `true`: Tooltip is always displayed once an activeIndex is set
  * `false`: Tooltip is never displayed
  * `undefined`: Recharts controls when tooltip displays
</ParamField>

### Position

<ParamField path="position" type="Partial<Coordinate>">
  If set, the tooltip displays at the specified position regardless of mouse position.

  You can set a single field (x or y) and let the other be calculated automatically.
</ParamField>

<ParamField path="offset" type="number | Coordinate" default="10">
  The offset between the tooltip and the mouse cursor position.

  * Number: Same offset for both x and y axes
  * Coordinate: Different offsets for each axis
</ParamField>

<ParamField path="allowEscapeViewBox" type="AllowInDimension" default="{x: false, y: false}">
  Allows the tooltip to extend beyond the viewBox of the chart.
</ParamField>

<ParamField path="reverseDirection" type="AllowInDimension" default="{x: false, y: false}">
  Reverses the direction the tooltip appears relative to the cursor.
</ParamField>

### Styling

<ParamField path="wrapperStyle" type="CSSProperties" default="{}">
  CSS styles applied to the wrapper `div` element.
</ParamField>

<ParamField path="contentStyle" type="CSSProperties" default="{}">
  CSS styles applied to the tooltip content element.
</ParamField>

<ParamField path="itemStyle" type="CSSProperties" default="{}">
  CSS styles applied to each tooltip item (li element).
</ParamField>

<ParamField path="labelStyle" type="CSSProperties" default="{}">
  CSS styles applied to the tooltip label (p element).
</ParamField>

### Cursor

<ParamField path="cursor" type="boolean | object | ReactElement | function" default="true">
  Controls the cursor element shown when tooltip is active.

  Options:

  * `false`: No cursor
  * `true`: Default cursor
  * `object`: Props for cursor element
  * `ReactElement`: Custom cursor element
  * `function`: Render function for custom cursor
</ParamField>

### Data formatting

<ParamField path="formatter" type="function">
  Customizes the value in the tooltip.

  Signature: `(value, name, item, index, payload) => ReactNode | [ReactNode, ReactNode]`

  If you return an array, the first entry is the formatted value, the second is the formatted name.
</ParamField>

<ParamField path="labelFormatter" type="function">
  Formats the tooltip label.

  Signature: `(label: any, payload: TooltipPayload) => ReactNode`
</ParamField>

<ParamField path="separator" type="string" default=" : ">
  The separator between name and value.
</ParamField>

### Filtering

<ParamField path="filterNull" type="boolean" default="true">
  When true, items with null or undefined values are not displayed.
</ParamField>

<ParamField path="includeHidden" type="boolean" default="false">
  If true, the tooltip displays information about hidden series.
</ParamField>

<ParamField path="payloadUniqBy" type="UniqueOption">
  Function to determine uniqueness of tooltip items.
</ParamField>

<ParamField path="itemSorter" type="TooltipItemSorter" default="name">
  Sorts tooltip items.

  Default sorts alphabetically by graphical item `name` property.
</ParamField>

### Animation

<ParamField path="isAnimationActive" type="boolean | 'auto'" default="auto">
  If false, animation is disabled.

  If "auto", animation is disabled in SSR and respects the user's prefers-reduced-motion preference.
</ParamField>

<ParamField path="animationDuration" type="number" default="400">
  Duration of animation, in milliseconds.
</ParamField>

<ParamField path="animationEasing" type="string" default="ease">
  The type of easing function.

  Options: 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'
</ParamField>

### Portal

<ParamField path="portal" type="HTMLElement | null">
  If defined, Tooltip uses this element as a target for rendering using React Portal.

  If undefined, Tooltip renders inside the recharts-wrapper element.
</ParamField>

### Advanced

<ParamField path="axisId" type="string | number" default="0">
  The tooltip attaches to the "Tooltip axis" which depends on layout.

  Use this to specify which axis the tooltip uses.
</ParamField>

<ParamField path="defaultIndex" type="number | string">
  Default active index for the tooltip.
</ParamField>

<ParamField path="useTranslate3d" type="boolean" default="false">
  If true, uses CSS translate3d for positioning.
</ParamField>

### Other

<ParamField path="label" type="string | number">
  The label displayed in the tooltip.

  Automatically provided by chart context.
</ParamField>

<ParamField path="payload" type="TooltipPayload">
  The array of data items to display.

  Automatically provided by chart context.
</ParamField>

<ParamField path="coordinate" type="Coordinate">
  The coordinate where the tooltip should appear.

  Automatically provided by chart context.
</ParamField>