Popover

An anchor-positioned floating panel that displays rich content relative to a trigger element.

Installation

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

Usage

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

#[component]
pub fn MyPopover() -> impl IntoView {
    view! {
        <popover::Root positioning={popover::Positioning::Bottom}>
            <popover::Trigger class="py-1.5 px-3 text-sm rounded border">
                "Open popover"
            </popover::Trigger>
            <popover::Content
                class="z-50 p-4 text-sm rounded-lg border shadow-md transition bg-background 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"
            >
                <popover::Arrow class="border-t border-l border-border" />
                "Popover content goes here."
            </popover::Content>
        </popover::Root>
    }
}

RootWith

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

Popover is closed

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

#[component]
pub fn MyPopover() -> impl IntoView {
    view! {
        <popover::RootWith let:p>
            <p class="mb-2 text-sm text-muted-foreground">
                {move || if p.open.get() { "Popover is open" } else { "Popover is closed" }}
            </p>
            <popover::Trigger class="py-1.5 px-3 text-sm rounded border">
                "Open popover"
            </popover::Trigger>
            <popover::Content
                class="z-50 p-4 text-sm rounded-lg border shadow-md transition bg-background 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"
            >
                "Popover content goes here."
            </popover::Content>
        </popover::RootWith>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the root wrapper element.
positioning	Positioning	Bottom	Where to render the content relative to the trigger.
hide_delay	Duration	200ms	How long to wait before unmounting the content after closing begins.
arrow_size	i32	8	Width and height of the arrow element in pixels.
open	bool	false	Initial open state.
auto_focus	bool	true	When true, focuses the first focusable element inside Content when the popover opens.
avoid_collisions	AvoidCollisions	Flip	How the overlay reacts when it would overflow the viewport.
on_open_change	Option<Callback<bool>>	None	Callback fired when the open state changes.

Trigger

Name	Type	Default	Description
class	String	""	CSS class applied to the trigger button.

Content

Name	Type	Default	Description
class	String	""	CSS class applied in both open and closed 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 popover is open.
hide_class	String	""	CSS class applied while the popover is closing.

Arrow

Name	Type	Default	Description
class	String	""	CSS class applied to the arrow element.

Positioning

Name	Type	Default	Description
TopStart	Positioning		Above the trigger, aligned to its left edge.
Top	Positioning		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.
BottomStart	Positioning		Below the trigger, aligned to its left edge.
Bottom	Positioning	default	Below the trigger, centered.
BottomEnd	Positioning		Below the trigger, aligned to its right edge.
LeftStart	Positioning		To the left of the trigger, aligned to its top edge.
Left	Positioning		To the left of the trigger, centered.
LeftEnd	Positioning		To the left of the trigger, aligned to its bottom edge.

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 overlay on the side with the most available space, regardless of the preferred positioning.
None	AvoidCollisions		No collision detection. Always uses the exact positioning specified.

Data Attributes

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

Keyboard Navigation

Key	Description
`Escape`	Closes the popover and returns focus to the trigger.