> ## 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 hooks

Hooks for accessing tooltip state and data.

## useIsTooltipActive

Returns whether the tooltip is currently active (visible).

```tsx theme={null}
import { useIsTooltipActive } from 'recharts';

function CustomComponent() {
  const isActive = useIsTooltipActive();
  
  return (
    <text x={10} y={10}>
      Tooltip is {isActive ? 'visible' : 'hidden'}
    </text>
  );
}
```

<ParamField path="returns" type="boolean">
  `true` if the tooltip is active, `false` otherwise. Returns `false` if used outside a chart context.
</ParamField>

**Since:** 3.7

## useActiveTooltipLabel

Returns the active tooltip label. The label is one of the values from the chart data, used to display in tooltip content.

```tsx theme={null}
import { useActiveTooltipLabel } from 'recharts';

function CustomComponent() {
  const label = useActiveTooltipLabel();
  
  if (!label) return null;
  
  return (
    <text x={10} y={10}>
      Active: {String(label)}
    </text>
  );
}
```

<ParamField path="returns" type="ActiveLabel">
  The active label, or `undefined` if there is no active interaction or if used outside a chart context.
</ParamField>

**Since:** 3.0

## useActiveTooltipDataPoints

Returns the currently active data points being displayed in the tooltip.

This returns an array because a chart can have multiple graphical items (e.g., multiple Lines), and a tooltip with `shared={true}` will display all items at the same time.

```tsx theme={null}
import { useActiveTooltipDataPoints } from 'recharts';

type DataPoint = {
  name: string;
  value: number;
  category: string;
};

function CustomComponent() {
  const dataPoints = useActiveTooltipDataPoints<DataPoint>();
  
  if (!dataPoints || dataPoints.length === 0) return null;
  
  return (
    <g>
      {dataPoints.map((point, i) => (
        <text key={i} x={10} y={20 + i * 15}>
          {point.name}: {point.value}
        </text>
      ))}
    </g>
  );
}
```

<ParamField path="T" type="generic" default="unknown">
  The type of your data points. Defaults to `unknown`.
</ParamField>

<ParamField path="returns" type="ReadonlyArray<T> | undefined">
  Array of data points currently visible in the tooltip, or `undefined` if there is no active interaction or if used outside a chart context.
</ParamField>

## useActiveTooltipCoordinate

Returns the Cartesian x + y coordinates of the active tooltip.

```tsx theme={null}
import { useActiveTooltipCoordinate } from 'recharts';

function CustomCursor() {
  const coordinate = useActiveTooltipCoordinate();
  
  if (!coordinate) return null;
  
  return (
    <circle 
      cx={coordinate.x} 
      cy={coordinate.y} 
      r={10} 
      fill="none" 
      stroke="red"
      strokeWidth={2}
    />
  );
}
```

<ParamField path="returns" type="Coordinate | undefined">
  Object with `x` and `y` pixel coordinates, or `undefined` if there is no active interaction or if used outside a chart context.
</ParamField>

**Since:** 3.7

## Coordinate type

```typescript theme={null}
interface Coordinate {
  x: number;
  y: number;
}
```

## Usage notes

* All tooltip hooks return `undefined` when used outside a chart context
* Recharts only allows one Tooltip per chart, so these hooks do not take any parameters
* These hooks follow the `<Tooltip />` props if the Tooltip element is present in the chart