Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

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

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

PropTypeDescriptionValues
contentstr

The content of the tooltip.

default_openbool

The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.

openbool

The controlled open state of the tooltip. Must be used in conjunction with on_open_change.

sideLiteral

The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoid_collisions is enabled.The position of the tooltip. Defaults to "top".

side_offsetUnion

The distance in pixels from the trigger. Defaults to 0.

alignLiteral

The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".

align_offsetUnion

An offset in pixels from the "start" or "end" alignment options.

avoid_collisionsbool

When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.

collision_paddingUnion

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.

arrow_paddingUnion

The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.

stickyLiteral

The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".

hide_when_detachedbool

Whether to hide the content when the trigger becomes fully occluded. Defaults to False.

delay_durationUnion

Override the duration in milliseconds to customize the open delay for a specific tooltip. Default is 700.

disable_hoverable_contentbool

Prevents Tooltip content from remaining open when hovering.

force_mountbool

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

aria_labelstr

By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.

Event Triggers

TriggerDescription
on_open_change

The on_open_change event handler is called when the open state of the component changes.

on_escape_key_down

The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.

on_pointer_down_outside

The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.

← PopoverTheme →

Did you find this useful?