Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

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.",
)

A tooltip message to appear.

PropTypeDescriptionValues
arrow_paddingint

The padding required to prevent the arrow from reaching the very edge of the popper.

arrow_shadow_colorstr

The color of the arrow shadow.

arrow_sizeint

Size of the arrow.

delayint

Delay (in ms) before hiding the tooltip

close_on_clickbool

If true, the tooltip will hide on click

close_on_escbool

If true, the tooltip will hide on pressing Esc key

close_on_mouse_downbool

If true, the tooltip will hide while the mouse is down

default_is_openbool

If true, the tooltip will be initially shown

directionLiteral

Theme direction ltr or rtl. Popper's placement will be set accordingly

gutterint

The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.

has_arrowbool

If true, the tooltip will show an arrow tip

is_disabledbool

If true, the tooltip with be disabled.

is_openbool

If true, the tooltip will be open.

labelstr

The label of the tooltip

open_delayint

Delay (in ms) before showing the tooltip

placementstr

The placement of the popper relative to its reference.

should_wrap_childrenbool

If true, the tooltip will wrap its children in a <span/> with tabIndex=0

Event Triggers

TriggerDescription
on_close

Fired when the tooltip is closing.

on_open

Fired when the tooltip is opened.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting