Learn

Components

Recipes

API Reference

Getting Started

Tutorial

Reflex Deploy

Self Hosting

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.

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

API Reference

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

Prop	Type	Default Value	Values
`content`	str
`default_open`	bool
`open`	bool
`side`	Literal
`side_offset`	Union[float, int]
`align`	Literal
`align_offset`	Union[float, int]
`avoid_collisions`	bool
`collision_padding`	Union[float, int, Dict]
`arrow_padding`	Union[float, int]
`sticky`	Literal
`hide_when_detached`	bool
`delay_duration`	Union[float, int]
`disable_hoverable_content`	bool
`force_mount`	bool
`aria_label`	str

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.

Did you find this useful?

No

Yes

Tooltip

API Reference

Tooltip