Popover

Anatomy

Non-modal floating panel anchored to a trigger element. Click trigger to toggle; click outside or press ESC to close. Focus is not trapped.

maud_ui::primitives::popover

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`id`	`String`	`"popover"`	Unique identifier for the popover content
`trigger`	`Markup`	`PreEscaped("")`	The element that triggers the popover open/close (typically a button)
`content`	`Markup`	`PreEscaped("")`	Markup content displayed inside the popover
`side`	`Option<Side>`	`None`	Side of the trigger the popover renders on. When set, takes precedence over `placement` (shadcn-compatible 4-way side selector).
`placement`	`Placement`	`Bottom`	Vertical placement relative to trigger (legacy 2-way API, default: Bottom). Kept for backward compatibility; prefer `side` for new code.
`align`	`Align`	`Center`	Horizontal alignment (default: Center)
`side_offset`	`Option<u32>`	`None`	Offset in pixels between the trigger and the popover along the side axis. Emitted as `data-side-offset` for JS-driven positioning engines.
`open`	`Option<bool>`	`None`	Controlled open state. When `Some(true)`, the popover is rendered visible (no `hidden` attribute, `data-state="open"`). When `Some(false)`, rendered hidden. When `None`, left for client JS to toggle (legacy default).

Examples

Popover with Form (bottom-start)

Right-Center with header/title/description

Left-End, controlled open state

Usage and composition

Import

use maud_ui::primitives::popover::{self, Props, Side, Placement, Align};

Example

use maud::html;
use maud_ui::primitives::popover;

html! {
    (popover::render(popover::Props {
        id: "demo-pop".to_string(),
        trigger: html! { button.mui-btn.mui-btn--primary { "Open popover" } },
        content: html! { p { "This is popover content." } },
        side: Some(popover::Side::Bottom),
        align: popover::Align::Center,
        side_offset: Some(8),
        open: Some(false),
        ..Default::default()
    }))
}

Side Enum

New 4-way side matrix (shadcn-compatible):

Value	Description
Top	Popover above trigger.
Right	Popover to the right.
Bottom	Popover below trigger (default).
Left	Popover to the left.

Align Enum

Horizontal alignment perpendicular to side:

Value	Description
Start	Align to the left edge of trigger.
Center	Center horizontally on trigger (default).
End	Align to the right edge of trigger.

Placement Enum (Legacy)

Deprecated in favor of Side; retained for backward compatibility:

Value	Equivalent Side
Top	Side::Top
Bottom	Side::Bottom

Helpers

header(children: Markup)

Groups title + description with spacing; matches shadcn PopoverHeader.

(popover::header(html! {
    (popover::title(html! { "Dimensions" }))
    (popover::description(html! { "Set width and height." }))
}))

title(children: Markup)

Semantic <h3> styled as the popover's primary label; matches shadcn PopoverTitle.

description(children: Markup)

Muted supporting copy rendered as <p>; matches shadcn PopoverDescription.

Shadcn reference

https://ui.shadcn.com/docs/components/base/popover

Accessibility

Popover content is a <div role="dialog"> with tabindex="-1" and unique id.
Trigger interaction handled by client JS (toggle visibility on click, close on ESC/outside click).
data-state="open" and data-state="closed" reflect current visibility state.
Content is hidden via hidden attribute when not open (when open: Some(false)).