Popover
Floating content container triggered by user interaction. Supports rich content, focus management, and dismissal.
This is a popover with rich content.
Options
Placement
Top
Bottom
Left
Right
Arrow
Arrow enabled
No arrow
Table of options
| Property | Values | Default |
|---|---|---|
| placement | top / bottom / left / right | bottom |
| arrow | boolean attribute | false |
Behaviors
Click outside or press Escape to dismiss.
Toggle on trigger click
The popover opens when the trigger button is clicked and closes when clicked again, when the user clicks outside, or when Escape is pressed.
Usage guidelines
Use for rich or interactive content that requires user action.
Do
Use popovers for rich content, interactive controls, or detailed information triggered by a user action.
Short label text.
Don't
Don't use popovers for simple one-line labels. Use a tooltip instead.
Accessibility
- Uses
role="dialog"on the popover panel. - The trigger button has
aria-expandedandaria-controlslinking it to the panel. - Focus moves into the popover on open and returns to the trigger on close.
Escapecloses the popover from anywhere inside it.- Tab focus is trapped within the open popover.
Design checklist
All brand/mode contextsWorks across light and dark modes.
Defined optionsPlacement, arrow documented.
Usage guidelinesDo/don't for content type.
Design tokensComponent-scoped tokens (
--uif-popover-*).