Popover
A small panel anchored to a trigger, for interactive content that does not deserve a modal.
Definition
A popover displays content anchored to an element, typically opened by click and containing interactive controls. It differs from a tooltip, which is descriptive and usually hover-triggered.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Requirements
- Open on click, not hover, when the content is interactive.
- Position relative to the trigger with collision detection, so it flips rather than overflowing the viewport.
- Close on Escape, on outside click, and on the trigger being activated again.
- Move focus into the popover if it contains controls, and return it to the trigger on close.
- Use aria-expanded on the trigger and connect the two with aria-controls.
- The CSS anchor positioning and popover APIs handle much of this natively where supported.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Principles behind this
The reasoning this solution is an application of.
- Steering LawLaw
- ElevationUI foundation
Depends on
Get these right first, or this one will not hold.
- Content on Hover or FocusAccessibility
- Focus ManagementAccessibility
Often used with
These usually appear in the same screen or the same decision.
- DropdownComponent
- Modal DialogComponent
Commonly confused with
Close enough to be mixed up, different enough to matter.
- TooltipComponent
A tooltip labels. A popover contains interactive content and takes focus.
Related concept
Connected closely enough to change how you apply this.
- Tooltips and Inline HelpUX writing