︲

︲

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component tooltip
from components.ui.tooltip import tooltip

Anatomy

Use the following composition to build a Tooltip component.

tooltip.root( tooltip.trigger(), tooltip.portal( tooltip.positioner( tooltip.popup( tooltip.arrow(), content=..., ), ), ), )

Examples

General

A simple tooltip example. Use the dealy prop to change how fast the tootip shows.

from components.ui.button import button
from components.ui.tooltip import tooltip


def tooltip_general():
    return tooltip.provider(
        tooltip.root(
            tooltip.trigger(
                render_=button("Hover", variant="outline", size="sm"),
            ),
            tooltip.portal(
                tooltip.positioner(
                    tooltip.popup(tooltip.arrow(), "Add to library"),
                ),
            ),
        ),
        delay=0,
    )

Side

Use the side prop in tooltip.positioner() to change the position of the tooltip.

import reflex as rx

from components.ui.button import button
from components.ui.tooltip import tooltip

sides = ["left", "top", "bottom", "right"]


def tooltip_sides():

    return rx.el.div(
        *[
            tooltip.provider(
                tooltip.root(
                    tooltip.trigger(
                        render_=button(side.capitalize(), variant="outline", size="sm"),
                    ),
                    tooltip.portal(
                        tooltip.positioner(
                            tooltip.popup(tooltip.arrow(), "Add to library"),
                            side=side,
                        ),
                    ),
                ),
                delay=0,
            )
            for side in sides
        ],
        class_name="flex flex-wrap gap-2",
    )