Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Chakra

/

Overlay

/

Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.

Example

rx.chakra.tooltip(
    rx.chakra.text("Example", font_size=30),
    label="Tooltip helper.",
)

API Reference

A tooltip message to appear.

Prop	Type	Default Value	Values
`arrow_padding`	int
`arrow_shadow_color`	str
`arrow_size`	int
`delay`	int
`close_on_click`	bool
`close_on_esc`	bool
`close_on_mouse_down`	bool
`default_is_open`	bool
`direction`	Literal
`gutter`	int
`has_arrow`	bool
`is_disabled`	bool
`is_open`	bool
`label`	str
`open_delay`	int
`placement`	str
`should_wrap_children`	bool

Event Triggers

Trigger	Description
`on_close`	Fired when the tooltip is closing.
`on_open`	Fired when the tooltip is opened.

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Tooltip

API Reference

Tooltip