UI Component LabOverlay
Popover
A small panel that opens next to a button and closes when the user clicks elsewhere.
Demo
How shipping is calculated
Orders over $50 ship free. Otherwise the fee depends on the region.
Also known as
- Toggletip — Carbon Design System
How to recognize it
A small card with a border and shadow, placed right next to the button that opened it. It can hold a title, text, and buttons.
Behavior
- Opens and closes when the button is pressed.
- Clicking outside or pressing Esc closes it (“light dismiss”).
- Unlike a modal, the rest of the page stays usable while it is open.
- This demo uses the HTML popover attribute; where CSS anchor positioning is not supported, it opens in the middle of the screen.
Keyboard
| Key | Action |
|---|---|
| Enter / Space | Opens or closes the popover. |
| Tab | From the button, moves into the popover’s contents. |
| Esc | Closes the popover and returns focus to the button. |
Similar components
- Tooltip: A popover opens on click and can contain buttons; a tooltip shows on hover or focus and holds only text.
- Modal (Dialog): A popover leaves the page usable and closes on an outside click; a modal blocks the page until it is closed.
Sources
- MDN: popover (Last checked: )
- Open UI: Popover API (Explainer) (Last checked: )
- Carbon Design System: Toggletip (Last checked: )