︲

︲

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

buridan add component tooltip
Usage
from components.ui.tooltip import tooltip
Anatomy

Use the following composition to build a Tooltip

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

Below are examples demonstrating how the component can be used.

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