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.

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.

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" | ...
side_offset
Union[float, int]
align
"start" | "center" | ...
align_offset
Union[float, int]
avoid_collisions
bool
collision_padding
Union[float, int, Dict]
arrow_padding
Union[float, int]
sticky
"partial" | "always"
hide_when_detached
bool
delay_duration
Union[float, int]
disable_hoverable_content
bool
force_mount
bool
aria_label
str

Event Triggers

See the full list of default event triggers
TriggerDescription
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.