Chapter 25: Popover

Core Idea

Displays rich, interactive content in a portal triggered by a button — the general-purpose overlay primitive when neither the menu-item vocabulary of DropdownMenu nor the destructive-confirmation semantics of AlertDialog fit.

Key Concepts

• Anatomy: Root → Trigger (+ optional Anchor), Portal → Content (→ Close, Arrow).
• Anchor: lets Content position against a different element than Trigger — useful when the visual trigger and the positioning reference aren't the same node.
• modal (default false): unlike Dialog/AlertDialog, Popover defaults to non-modal — outside interaction isn't blocked unless you opt in.
• Same positioning API as DropdownMenu/HoverCard: side, align, offsets, collision handling, and the matching CSS variables.

Key Takeaways

1. Default non-modal behavior is the key differentiator from Dialog — good for supplementary rich content (a form, a color picker, a rich preview) that shouldn't fully block the rest of the page.
2. Use Anchor when you want the popover to appear next to something other than the button that opened it (e.g. a toolbar button opens a popover anchored to a text selection).
3. Set modal={true} if the popover's content needs Dialog-like focus trapping (e.g. it contains a form that shouldn't lose focus to the rest of the page).

Connects To

• Dropdown Menu / Hover Card: share the same Content positioning API.
• Dialog: the modal, focus-trapping alternative for content that should fully block the page.