Popover

Use cases

• Filter panels — expose filter controls anchored to a toolbar button.
• Quick-edit forms — inline editing without opening a full dialog.
• Color/date pickers — rich controls that float near their trigger.
• Information panels — show extra detail on demand without navigating away.

When NOT to use

• Simple labels — use Tooltip. Popovers are heavier.
• Modal confirmations that block the page — use Dialog.
• Right-click menus — use ContextMenu.

Sizes

Composition

• Popover is controlled via open / onOpenChange. Uncontrolled mode works without props.
• Web Popover composes the shared Popper positioning layer, so arrow placement, collision handling, flipping, portal behavior, outside pointer dismissal, and Escape dismissal stay consistent with other floating components.
• PopoverContent renders with role="dialog" — interactive children (inputs, buttons) are keyboard-accessible by default.
• Pass side (top, bottom, left, right) on PopoverContent to position relative to the trigger.
• Pass arrow on Popover when the panel needs a pointer connected to the trigger.
• Pass matchReferenceWidth on Popover when a full-width trigger and floating panel must stay aligned in responsive form layouts.
• PopoverContent accepts any React content, including async-loaded panels, form controls, rich descriptions, and tokenized custom layouts. Keep async loading states explicit with Skeleton or muted text.
• Use arrowClassName to theme the arrow with the same background/border tokens as custom content.
• Outside clicks and Escape both dismiss via onOpenChange(false).

Related

• Tooltip — hover hint, non-interactive.
• Dialog — modal overlay for confirmations.
• HoverCard — hover-triggered preview panel.
• DropdownMenu — action list anchored to a trigger.