Skip to main content
Popovers display rich content in a floating panel when users click a trigger element. The first child becomes the trigger; all remaining children become the panel content. Unlike Tooltip and HoverCard, which appear on hover, Popovers require a click and stay open until the user clicks outside — making them ideal for forms, settings, and menus.

​
Basic Usage

​
Without Header

Skip the title and description to render content directly in the panel.

​
Positioning

Control which side the panel appears on with the side prop:
The renderer auto-adjusts if the popover would overflow the viewport, so the side is a preference rather than a hard constraint.

​
Inline Confirmation

For lighter-weight confirmations that don’t need a full modal overlay, a Popover works well. The same trigger-then-content pattern applies.

​
API Reference

Popover Parameters

​
str | None
default:"None"
Optional header title for the popover panel.
​
str | None
default:"None"
Optional description below the title.
​
str | None
default:"None"
Preferred side to show the popover: "top", "right", "bottom", "left".
​
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Popover
For the complete protocol schema, see Popover.