Popover
It opens a small layer in the right spot for a quick choice or a bit of help, without disturbing the rest of the page.
What a popover adds without moving the page
A popover opens a small floating layer from the exact control that asked for it, without making the rest of the page move.
The real job
Answer a quick question right at the trigger
A popover answers a quick question exactly where it comes up. The page stays put, the anchor keeps the context clear, and the user can dismiss it as soon as they are done.
Good fit
When the anchor does most of the work
- Compact selectors
- Formatting controls
- Short contextual help
Bad fit
When the anchor stops making sense
- The interaction is blocking
- The content has no clear visual anchor
In the wild
What fits in a popover
- 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>
)}Classic trap
An address form is not popover-sized
Putting a full address form in a popover is where things go sideways. Once there are several fields to validate and errors to recover from, the anchor stops helping and the content needs a drawer or its own page.
Before you choose
A few checks before you make it float
- 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?
You may need…