Popover

Contextual content anchored to a trigger and themed correctly inside its portal.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add popover

Dependencies

What add popover installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

npm

@base-ui/[email protected]

Examples

3 examples · 1 component

Title, description and a field

The title and description label the popup; focus moves to the first field.

Placement

side and align choose the preferred position; it flips when there is no room.

Inline edit with actions

A small form that saves or cancels with PopoverClose, returning focus to the trigger.

API reference

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`Popover` Root; accepts open, defaultOpen, onOpenChange and modal.	`—`	—
`PopoverTrigger` Toggles the popover; use render to reuse a control. openOnHover opens it on hover.	`button`	—
`PopoverContent` Portaled surface; side, align and sideOffset position it and it flips to stay in view.	`div`	—
`PopoverHeader` Groups the title and description.	`div`	—
`PopoverTitle` Labels the popup (aria-labelledby).	`h2`	—
`PopoverDescription` Describes the popup (aria-describedby).	`p`	—
`PopoverClose` Closes the popover; use render to reuse a Button.	`button`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Closed	Only the trigger renders; the popup mounts on open.
Open	Anchored to the trigger with a short scale-and-fade; the trigger reports aria-expanded.
Collision	Flips or shifts to stay 8px inside the viewport.
Dismiss	Escape, an outside click or PopoverClose returns focus to the trigger.
Reduced motion	The transition is removed with prefers-reduced-motion.

Accessibility

Focus moves into the popup when it opens and returns to the trigger when it closes; Escape and an outside click dismiss it.

PopoverTitle and PopoverDescription name and describe the popup automatically; include a title when the content is not self-explanatory.

The trigger exposes aria-expanded and aria-controls. Use Tooltip for short non-interactive hints and Dialog when the task needs the user's full attention.