Tooltip

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

Installation

biji-ui = { version = "0.5.0", features = ["tooltip"] }

Usage

use leptos::prelude::*;
use biji_ui::components::tooltip;

#[component]
pub fn MyTooltip() -> impl IntoView {
    view! {
        <tooltip::Root positioning={tooltip::Positioning::Top}>
            <tooltip::Trigger class="rounded border px-3 py-1.5 text-sm">
                "Hover me"
            </tooltip::Trigger>
            <tooltip::Content
                class="z-50 rounded-lg bg-gray-900 px-3 py-2 text-sm text-white"
                show_class="opacity-100"
                hide_class="opacity-0"
            >
                <tooltip::Arrow class="border-t border-l border-slate-500" />
                "Tooltip content"
            </tooltip::Content>
        </tooltip::Root>
    }
}

RootWith

Use RootWith to access TooltipState inline via the let: binding. The state is Copy and safe to pass as a prop.

Tooltip is closed

use leptos::prelude::*;
use biji_ui::components::tooltip;

#[component]
pub fn MyTooltip() -> impl IntoView {
    view! {
        <tooltip::RootWith positioning={tooltip::Positioning::Top} let:t>
            <p class="text-sm text-muted-foreground">
                {move || if t.open.get() { "Tooltip is open" } else { "Tooltip is closed" }}
            </p>
            <tooltip::Trigger class="rounded border px-3 py-1.5 text-sm">
                "Hover me"
            </tooltip::Trigger>
            <tooltip::Content
                class="z-50 rounded-lg bg-gray-900 px-3 py-2 text-sm text-white"
                show_class="opacity-100"
                hide_class="opacity-0"
            >
                "Tooltip content"
            </tooltip::Content>
        </tooltip::RootWith>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the root wrapper element.
positioning	Positioning	Top	Where to render the tooltip content relative to the trigger. See the Positioning enum below.
hide_delay	Duration	200ms	How long to wait before unmounting the content after the pointer leaves. Should match your CSS transition duration.
avoid_collisions	AvoidCollisions	Flip	How the tooltip reacts when it would overflow the viewport.

Trigger

Name	Type	Default	Description
class	String	""	CSS class applied to the trigger button. The trigger opens the tooltip on hover and on focus.

Content

Name	Type	Default	Description
class	String	""	CSS class applied in both visible and hidden states. Use `transition` rather than `transition-all` to avoid animating position changes. Add `origin-[var(--biji-transform-origin)]` to scale animations from the trigger direction.
show_class	String	""	CSS class applied when the tooltip is visible.
hide_class	String	""	CSS class applied while the tooltip is hiding.

Arrow

Name	Type	Default	Description
class	String	""	CSS class applied to the arrow indicator element. Position and rotation are handled automatically.

AvoidCollisions

Name	Type	Default	Description
Flip	AvoidCollisions	default	Keeps the preferred side. Flips to the opposite side if it does not fit. If neither fits, uses whichever has more space.
AutoPlace	AvoidCollisions		Always places the tooltip on the side with the most available space, regardless of the preferred positioning.
None	AvoidCollisions		No collision detection. Always uses the exact positioning specified.

Positioning

Name	Type	Default	Description
TopStart	Positioning		Above the trigger, aligned to its left edge.
Top	Positioning	default	Above the trigger, centered.
TopEnd	Positioning		Above the trigger, aligned to its right edge.
RightStart	Positioning		To the right of the trigger, aligned to its top edge.
Right	Positioning		To the right of the trigger, centered.
RightEnd	Positioning		To the right of the trigger, aligned to its bottom edge.
BottomEnd	Positioning		Below the trigger, aligned to its right edge.
Bottom	Positioning		Below the trigger, centered.
BottomStart	Positioning		Below the trigger, aligned to its left edge.
LeftEnd	Positioning		To the left of the trigger, aligned to its bottom edge.
Left	Positioning		To the left of the trigger, centered.
LeftStart	Positioning		To the left of the trigger, aligned to its top edge.