> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.recharts.GraphingTooltip
---

# Tooltip

```python exec
import reflex as rx
```

Tooltips are the little boxes that pop up when you hover over something. Tooltips are always attached to something, like a dot on a scatter chart, or a bar on a bar chart.

```python demo graphing
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def tooltip_simple():
    return rx.recharts.composed_chart(
        rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
        rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
        rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
        rx.recharts.graphing_tooltip(),
        data=data,
        width="100%",
        height=300,
    )
```

## Custom Styling

The `rx.recharts.graphing_tooltip` component allows for customization of the tooltip's style, position, and layout. `separator` sets the separator between the data key and value. `view_box` prop defines the dimensions of the chart's viewbox while `allow_escape_view_box` determines whether the tooltip can extend beyond the viewBox horizontally (x) or vertically (y). `wrapper_style` prop allows you to style the outer container or wrapper of the tooltip. `content_style` prop allows you to style the inner content area of the tooltip. `is_animation_active` prop determines if the tooltip animation is active or not.

```python demo graphing
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


def tooltip_custom_styling():
    return rx.recharts.composed_chart(
        rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
        rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
        rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(
            separator=" - ",
            view_box={"width": 675, " height": 300},
            allow_escape_view_box={"x": True, "y": False},
            wrapper_style={
                "backgroundColor": rx.color("accent", 3),
                "borderRadius": "8px",
                "padding": "10px",
            },
            content_style={
                "backgroundColor": rx.color("accent", 4),
                "borderRadius": "4px",
                "padding": "8px",
            },
            position={"x": 600, "y": 0},
            is_animation_active=False,
        ),
        data=data,
        height=300,
        width="100%",
    )
```

## API Reference

### rx.recharts.GraphingTooltip

A Tooltip component in Recharts.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `separator` | str | `":"` | The separator between name and value. |
| `offset` | int | `10` | The offset size of tooltip. Number. |
| `filter_null` | bool | `True` | When an item of the payload has value null or undefined, this item won't be displayed. |
| `cursor` | dict[str, Any], bool | `{"strokeWidth": 1, "fill": rx.color("gray", 3)}` | If set false, no cursor will be drawn when tooltip is active. |
| `view_box` | dict[str, Any] | - | The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally. |
| `item_style` | dict[str, Any] | `{"color": rx.color("gray", 12)}` | The style of default tooltip content item which is a li element. |
| `wrapper_style` | dict[str, Any] | `{}` | The style of tooltip wrapper which is a dom element. |
| `content_style` | dict[str, Any] | `{"background": rx.color("gray", 1), "borderColor": rx.color("gray", 4), "borderRadius": "8px"}` | The style of tooltip content which is a dom element. |
| `label_style` | dict[str, Any] | `{"color": rx.color("gray", 11)}` | The style of default tooltip label which is a p element. |
| `allow_escape_view_box` | dict[str, bool] | `{"x": False, "y": False}` | This option allows the tooltip to extend beyond the viewBox of the chart itself. |
| `active` | bool | `False` | If set true, the tooltip is displayed. If set false, the tooltip is hidden, usually calculated internally. |
| `position` | dict[str, Any] | - | If this field is set, the tooltip position will be fixed and will not move anymore. |
| `coordinate` | dict[str, Any] | `{"x": 0, "y": 0}` | The coordinate of tooltip which is usually calculated internally. |
| `is_animation_active` | bool | `True` | If set false, animation of tooltip will be disabled. |
| `animation_duration` | int | `1500` | Specifies the duration of animation, the unit of this option is ms. |
| `animation_easing` | Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"] | `"ease"` | The type of easing function. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/