Popover
A compact, dismissible layer attached to the exact control or object that opened it.
Definition
Definition
A popover is a small layer anchored to the exact control that opened it, floating above the page without moving anything else.
Problem it solves
Problem it solves
A popover answers a quick question right where it was asked, without any real interruption — the page stays exactly as it was, and the user usually dismisses it themselves once they're done.
When to use it
When to use it
- Compact selectors
- Formatting controls
- Short contextual help
When not to use it
When not to use it
- The interaction is blocking
- The content has no clear visual anchor
Example
Example
- Color picker
- Formatting menu
- Short field help
See the technical example
<button aria-expanded={open} aria-controls="formatting">
Formatting
</button>
{open && (
<div id="formatting" role="group" aria-label="Formatting">
{/* compact controls */}
</div>
)}Counter-example
Counter-example
A popover holding a multi-field address form is a common mistake. Once there are several fields to validate and an error to recover from, the anchor point stops making sense and the content needs a drawer or its own page.
Questions to ask yourself
Questions to ask yourself
- Does the content clearly belong to one specific control or object?
- Can the user dismiss it without making a decision first?
- Would it still make sense if the trigger scrolled out of view?
- Is there more than one short field or action inside it?
Related patterns