Popover
A popover is a small panel that opens next to the button that triggered it, for a quick task like sharing, filtering or picking a value.
- Also called
- popup
- Platforms
- Web
- In the gallery
- 50 web designs
Popovers from the Kombai gallery: a team workspace's share settings, a cabin rental site's price filter and a trading platform's price notifications.
What is a popover?
A popover is a small panel that opens next to the button or field that triggered it and points back at it. It holds a short task, like sharing, filtering or picking a value, while the rest of the page stays usable. A click outside or Escape closes it.
- It is anchored: it opens beside its trigger, often with an arrow pointing back.
- It is not modal: there is no scrim, and the page behind keeps working.
Popovers show up across date picker, calendar, color picker and notifications screens.
When to use a popover
- A small task in contextShare, filter or set one value without leaving the page.
- Settings for one elementA colour, a schedule or a field type for the thing that was clicked.
- A quick lookNotifications or a preview card that people check and close.
When not to use one
- Questions that need an answerUse a dialog when people can't go on without replying.
- A plain list of actionsUse a dropdown menu for a list of commands.
- Long formsMore than a few fields belong in a dialog, a drawer or a page.
Anatomy of a popover
This one works. Press Share to open or close it, Tab into it to invite someone, and press Escape or click elsewhere in the demo to close it.
Q3 release plan
Edited 4 minutes ago
Share this doc
- MRMara Ruiz Owner
- Closed
- Open
- Keyboard focus
- Link copied
- TriggerThe button it opens from
- PanelFloats beside the trigger
- ArrowPoints back at the trigger
- ContentOne small task
- Close buttonOptional, Escape works too
- StatesClosed, open, focus, copied
Popover variants
We sorted every popover design in the Kombai gallery and found five patterns. Browse all 50 web designs.
1. Filter popovers
A price range or a set of stages that narrows a list, opened from the filter it changes.
2. Share and people popovers
Invite fields, link copying and attendee lists that open from a Share or People button.
3. Notification popovers
Recent activity opened from a bell or an inbox icon, with a way to see everything.
4. Property editors
A small form for one setting, like a fill colour, a repeat schedule or a feedback range, saved without leaving the canvas or the record.
5. Hover cards and hotspots
Cards that open from a map pin, a product hotspot or a hovered thumbnail, with enough detail to decide whether to click through.
Where popovers show up
Search and booking
Guests, trip dates and move-in days picked in place, so the search bar stays short.
Data tools
Field mapping, event filters and probe pickers opened from a table, an import or a chart.
AI tools
Tool pickers, voice settings and upload trays that open from the prompt box.
Popover vs similar components
Build notes
- Use the popover attribute and a button with popovertarget. The browser shows it in the top layer and closes it on Escape or a click outside.
- popovertarget also gives the button aria-expanded and puts the popover next in the Tab order.
- Building it yourself? Give the button aria-expanded and aria-controls, and put the panel right after it in the DOM.
- When it closes with Escape, return focus to the button that opened it.
- Anchor it with CSS anchor positioning, and add position-try-fallbacks so it flips instead of running off screen.
- Don't trap focus or add a scrim. If people must answer before going on, use a dialog.
FAQ
What's the difference between a popover and a tooltip?
A tooltip is a short label that shows when an element is hovered or focused, and it never takes focus itself. A popover opens on a click, can hold buttons and fields, and stays until people close it.
Popover or dialog?
Use a popover for a small task tied to one element that people can ignore, like sharing or filtering. Use a dialog when the page has to wait for an answer, like confirming a delete.
Popover or dropdown menu?
A dropdown menu is a list of commands that closes after a choice. A popover can hold anything, like a form, a picker or a preview, and stays open while people work in it.
Should a popover close when people click outside it?
Usually, yes. That light dismiss is the default for popover="auto", along with Escape. Use popover="manual" for a popover that should stay open until people close it on purpose.
Related terms
All glossary terms · Browse 50 web popover designs