Reflex Logo
Docs Logo
Library

/

Overlay

/

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.

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.

Number of times tooltip opened or closed: 0

Tooltip open: false

Hover over the button to see the tooltip.

API Reference

rx.tooltip

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

PropType | ValuesDefaultInteractive
content
str
-
default_open
bool
-
open
bool
-
side
"top" | "right" | ...
"top"
side_offset
Union[int, float]
0
align
"start" | "center" | ...
"center"
align_offset
Union[int, float]
-
avoid_collisions
bool
True
collision_padding
Union[float, int, dict]
0
arrow_padding
Union[int, float]
0
sticky
"partial" | "always"
"partial"
hide_when_detached
bool
False
delay_duration
Union[int, float]
-
disable_hoverable_content
bool
-
force_mount
bool
-
aria_label
str
-

Event Triggers

See the full list of default event triggers
TriggerDescription
on_open_changeFired when the open state changes.
on_escape_key_downFired when the escape key is pressed.
on_pointer_down_outsideFired when the pointer is down outside the tooltip.
Built with Reflex