Hover Card

A card that appears when hovering over a trigger, with configurable open and close delays.

Built with @biji_ui.

Installation

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

Usage

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

#[component]
pub fn MyHoverCard() -> impl IntoView {
    view! {
        <hover_card::Root>
            <hover_card::Trigger class="inline-block underline decoration-dotted cursor-pointer">
                "@biji_ui"
            </hover_card::Trigger>
            <hover_card::Content
                class="z-50 w-64 rounded-lg border shadow-md transition bg-background \
                       border-border origin-[var(--biji-transform-origin)]"
                show_class="opacity-100 scale-100 duration-150 ease-out"
                hide_class="opacity-0 scale-95 duration-100 ease-in"
            >
                <div class="p-4">
                    <p class="text-sm font-semibold">"Biji UI"</p>
                    <p class="text-xs text-muted-foreground mt-1">
                        "Headless UI components for Leptos."
                    </p>
                </div>
            </hover_card::Content>
        </hover_card::Root>
    }
}

RootWith

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

Card is closed

@biji_ui

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

#[component]
pub fn MyHoverCard() -> impl IntoView {
    view! {
        <hover_card::RootWith let:h>
            <p class="mb-1 text-sm text-muted-foreground">
                {move || if h.open.get() { "Card is open" } else { "Card is closed" }}
            </p>
            <hover_card::Trigger class="inline-block underline decoration-dotted cursor-pointer">
                "@biji_ui"
            </hover_card::Trigger>
            <hover_card::Content
                class="z-50 w-64 rounded-lg border shadow-md transition bg-background \
                       border-border origin-[var(--biji-transform-origin)]"
                show_class="opacity-100 scale-100 duration-150 ease-out"
                hide_class="opacity-0 scale-95 duration-100 ease-in"
            >
                <div class="p-4">
                    <p class="text-sm font-semibold">"Biji UI"</p>
                    <p class="text-xs text-muted-foreground mt-1">
                        "Headless UI components for Leptos."
                    </p>
                </div>
            </hover_card::Content>
        </hover_card::RootWith>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the wrapper `<span>`.
positioning	Positioning	Bottom	Where to render the card relative to the trigger.
avoid_collisions	AvoidCollisions	Flip	How the card reacts when it would overflow the viewport.
open_delay	Duration	700ms	How long after the pointer enters the trigger before the card appears.
close_delay	Duration	300ms	How long after the pointer leaves before the card hides.
hide_delay	Duration	200ms	How long to wait before unmounting Content after closing (match your CSS transition).
arrow_size	i32	8	Size in pixels of the optional Arrow element.
open	bool	false	Initial open state.
on_open_change	Option<Callback<bool>>	None	Called with `true` when the card opens and `false` when it closes.

Trigger

Name	Type	Default	Description
class	String	""	CSS class applied to the `<span>` wrapper.

Content

Name	Type	Default	Description
class	String	""	CSS class applied in both open and closed states.
show_class	String	""	CSS class applied when the card is open.
hide_class	String	""	CSS class applied while the card is closing.

Arrow

Name	Type	Default	Description
class	String	""	CSS class applied to the arrow `<div>`.

Data Attributes

Attribute	Description
data-state	"open" when the card is visible; "closed" otherwise. Present on Trigger.