> 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.tooltip

Tooltip: |
  lambda **props: rx.tooltip(
      rx.button("Hover over me"),
      content="This is the tooltip content.",
      **props,
  )
---

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

# Tooltip

A `tooltip` displays informative information when users hover over or focus on an element.

It takes a `content` prop, which is the content associated with the tooltip.

```python demo
rx.tooltip(
    rx.button("Hover over me"),
    content="This is the tooltip content.",
)
```

## Events when the Tooltip opens or closes

The `on_open_change` event is called when the `open` state of the tooltip changes. It is used in conjunction with the `open` prop, which is passed to the event handler.

```python demo exec
class TooltipState(rx.State):
    num_opens: int = 0
    opened: bool = False

    @rx.event
    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


def index():
    return rx.flex(
        rx.heading(
            f"Number of times tooltip opened or closed: {TooltipState.num_opens}"
        ),
        rx.heading(f"Tooltip open: {TooltipState.opened}"),
        rx.text(
            "Hover over the button to see the tooltip.",
            rx.tooltip(
                rx.button("Hover over me"),
                content="This is the tooltip content.",
                on_open_change=TooltipState.count_opens,
            ),
        ),
        direction="column",
        spacing="3",
    )
```

## API Reference

### rx.tooltip

Floating element that provides a control with contextual information via pointer or focus.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | - | The content of the tooltip. |
| `default_open` | bool | - | The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state. |
| `open` | bool | - | The controlled open state of the tooltip. Must be used in conjunction with `on_open_change`. |
| `side` | Literal["top", "right", "bottom", "left"] | `"top"` | The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. |
| `side_offset` | float, int | `0` | The distance in pixels from the trigger. |
| `align` | Literal["start", "center", "end"] | `"center"` | The preferred alignment against the trigger. May change when collisions occur. |
| `align_offset` | float, int | - | An offset in pixels from the "start" or "end" alignment options. |
| `avoid_collisions` | bool | `True` | When true, overrides the side and align preferences to prevent collisions with boundary edges. |
| `collision_padding` | float, int, dict[str, float, int] | `0` | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. |
| `arrow_padding` | float, int | `0` | The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. |
| `sticky` | Literal["partial", "always"] | `"partial"` | The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. |
| `hide_when_detached` | bool | `False` | Whether to hide the content when the trigger becomes fully occluded. |
| `delay_duration` | float, int | - | Override the duration in milliseconds to customize the open delay for a specific tooltip. Default is 700. |
| `disable_hoverable_content` | bool | - | Prevents Tooltip content from remaining open when hovering. |
| `force_mount` | bool | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| `aria_label` | str | - | By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label. |

#### Event Triggers

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

Component-specific event triggers:

| Event Trigger | Description |
| --- | --- |
| `on_open_change` | Fired when the open state changes. |
| `on_escape_key_down` | Fired when the escape key is pressed. |
| `on_pointer_down_outside` | Fired when the pointer is down outside the tooltip. |