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.

Prop	Type \| Values	Interactive
`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`	false
`collision_padding`	`Union[float, int, Dict]`
`arrow_padding`	`Union[float, int]`
`sticky`	`"partial" \| "always"`
`hide_when_detached`	`bool`	false
`delay_duration`	`Union[float, int]`
`disable_hoverable_content`	`bool`	false
`force_mount`	`bool`	false
`aria_label`	`str`

Event Triggers

See the full list of default event triggers

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.

Learn

Components

Recipes

API Reference

Tooltip

Events when the Tooltip opens or closes

Number of times tooltip opened or closed: 0

Tooltip open: false

API Reference

rx.tooltip

Event Triggers