Skip to main content

​
Import

from reflex_ui import tooltip

​
Description

A tooltip component that displays helpful text when hovering over or focusing on an element. Supports advanced positioning with collision detection and cursor tracking.

​
High-Level API

tooltip(
    button("Hover me"),
    content="Helpful tooltip text"
)
The first positional argument is the trigger component, and the content parameter specifies what to display in the tooltip.

​
Props

​
trigger
Component
required
Component that triggers the tooltip (first positional argument)
​
content
str | Component
Content to display in the tooltip
​
open
Var[bool] | bool
Whether tooltip is currently open (controlled)
​
default_open
bool
default:"False"
Initial open state (uncontrolled)
​
disabled
bool
default:"False"
Disable the tooltip
​
track_cursor_axis
Literal['none', 'x', 'y', 'bottom']
default:"'none'"
Which axis the tooltip should track the cursor on
​
disable_hoverable_popup
bool
default:"True"
When true, popup closes when pointer leaves trigger even if it moves to popup

​
Timing Props

​
delay
int
default:"0"
Delay in ms before tooltip opens on hover
​
close_delay
int
default:"0"
Delay in ms before closing tooltip after hover ends

​
Positioning Props

​
side
Literal['top', 'right', 'bottom', 'left', 'inline-start', 'inline-end']
default:"'top'"
Which side of trigger to position against
​
align
Literal['start', 'center', 'end']
default:"'center'"
How to align relative to the side
​
side_offset
int
default:"8"
Distance between trigger and tooltip in pixels
​
align_offset
int
default:"0"
Offset along alignment axis in pixels
​
arrow_padding
int
default:"5"
Minimum distance between arrow and tooltip edges
​
anchor
str
Element selector to position against (defaults to trigger)
​
collision_boundary
str
default:"'clipping-ancestors'"
Boundary element for collision detection
​
collision_padding
int
default:"5"
Padding from collision boundary
​
sticky
bool
default:"False"
Maintain position after anchor scrolls out of view
​
position_method
Literal['absolute', 'fixed']
default:"'absolute'"
CSS position property to use
​
disable_anchor_tracking
bool
default:"False"
Disable tracking anchor’s layout shifts
​
collision_avoidance
str | dict[str, str]
Strategy for handling collisions

​
Portal Props

​
container
str
Parent element selector for portal
​
keep_mounted
bool
default:"False"
Keep portal mounted when hidden

​
Event Handlers

​
on_open_change
EventHandler[bool]
Called when tooltip opens or closes
​
on_open_change_complete
EventHandler[bool]
Called after animations complete

​
Compositional API

​
tooltip.provider()

Provider for managing multiple tooltips.
​
delay
int
Default open delay in ms for all tooltips
​
close_delay
int
Default close delay in ms
​
timeout
int
default:"400"
Time window in ms where another tooltip opens instantly after closing previous one

​
tooltip.root()

Root container for a tooltip.
​
open
Var[bool] | bool
Controlled open state
​
default_open
bool
Initial open state
​
track_cursor_axis
Literal['none', 'x', 'y', 'bottom']
Cursor tracking axis
​
disabled
bool
Disable tooltip
​
disable_hoverable_popup
bool
Disable hoverable popup behavior

​
tooltip.trigger()

Element that triggers the tooltip.
​
delay
int
default:"300"
Open delay in ms
​
close_delay
int
default:"0"
Close delay in ms
​
render_
Component
Custom trigger component

​
tooltip.portal()

Portals tooltip to different DOM location.
​
container
str
Parent element selector
​
keep_mounted
bool
Keep mounted when hidden

​
tooltip.positioner()

Positions tooltip relative to trigger.
​
align
Literal['start', 'center', 'end']
Alignment
​
align_offset
int
Alignment offset
​
side
Literal['top', 'right', 'bottom', 'left', 'inline-start', 'inline-end']
Side to align to
​
side_offset
int
Distance from trigger
​
arrow_padding
int
Arrow padding
​
anchor
str
Anchor element
​
collision_boundary
str
Collision boundary
​
collision_padding
int
Boundary padding
​
sticky
bool
Sticky positioning
​
position_method
Literal['absolute', 'fixed']
Position method
​
disable_anchor_tracking
bool
Disable anchor tracking
​
collision_avoidance
str | dict[str, str]
Collision strategy
​
render_
Component
Custom positioner

​
tooltip.popup()

Container for tooltip content.
​
render_
Component
Custom popup component

​
tooltip.arrow()

Arrow pointing to trigger.

​
Class Names

Access default class names via tooltip.class_names:
  • TRIGGER: Trigger element styling
  • POPUP: Popup container styling
  • ARROW: Arrow element styling

​
Example

import reflex as rx
from reflex_ui import tooltip, button

def my_component():
    return rx.box(
        # Simple tooltip
        tooltip(
            button("Help", variant="outline"),
            content="Click for more information"
        ),
        
        # Advanced tooltip with custom positioning
        tooltip.root(
            tooltip.trigger(
                render_=button("Info", size="icon-sm")
            ),
            tooltip.portal(
                tooltip.positioner(
                    tooltip.popup(
                        tooltip.arrow(),
                        rx.text("Detailed information here")
                    ),
                    side="right",
                    side_offset=10
                )
            ),
            delay=500
        )
    )

Build docs developers (and LLMs) love

Get started for freeTalk to us