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