Popover

Displays rich content in a portal, triggered by a button.

This component could use some work

While this component does make use of the new popover browser API, proper positioning is still not widely supported. There are hacks in place to try to work around this issue while still taking advantage of the rest of the API. Until this is implemented (hopefully soon - Aug 03, 2025) that puts this component in only a 'Good Enough' state. More Info

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn PopoverExample() -> impl IntoView {
    view! {
        <Popover>
            <PopoverTrigger>
                <Button variant="outline">"Open popover"</Button>
            </PopoverTrigger>
            <PopoverContent class="w-80">
                <form>
                    <FieldSet>
                        <FieldLegend>"Dimensions"</FieldLegend>
                        <FieldDescription>"Set the dimensions for the layer."</FieldDescription>
                        <FieldGroup class="[&_input]:w-48 gap-2">
                            <Field orientation="horizontal">
                                <Input value="100%" autofocus=true>
                                    "Width"
                                </Input>
                            </Field>
                            <Field orientation="horizontal">
                                <Input value="300px">"Max. width"</Input>
                            </Field>
                            <Field orientation="horizontal">
                                <Input value="25px">"Height"</Input>
                            </Field>
                            <Field orientation="horizontal">
                                <Input value="none">"Max. height"</Input>
                            </Field>
                        </FieldGroup>
                    </FieldSet>
                </form>
            </PopoverContent>
        </Popover>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn PopoverAnatomy() -> impl IntoView {
    view! {
        <Popover>
            <PopoverTrigger>
                <Button />
            </PopoverTrigger>
            <PopoverContent />
        </Popover>
    }
}

API Reference

Popover

Contains all the parts of a popover.

Implements global attributes.

PopoverContent

The component that pops out when the popover is open.

Implements global attributes.

PopoverTrigger

Provides context to a `Button` that triggers a popover..

Implements global attributes.