--- title: "Popover UI: anatomy, variants and examples | Kombai" description: "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." canonical_url: https://kombai.com/glossary/popover/ author: "The Kombai Team" --- # 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 Kombai gallery: [50 web designs](https://kombai.com/gallery/web/popover/) - [Escapewright](https://kombai.com/gallery/inspirations/popover-web-44/) (Web) - [Nestward](https://kombai.com/gallery/inspirations/popover-web-22/) (Web) - [Ivorstone Exchange](https://kombai.com/gallery/inspirations/popover-web-40/) (Web) ## 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. ## When to use popover - **A small task in context.** Share, filter or set one value without leaving the page. - **Settings for one element.** A colour, a schedule or a field type for the thing that was clicked. - **A quick look.** Notifications or a preview card that people check and close. ## When not to use one - **Questions that need an answer.** Use a dialog when people can't go on without replying. - **A plain list of actions.** Use a dropdown menu for a list of commands. - **Long forms.** More than a few fields belong in a dialog, a drawer or a page. ## Anatomy 1. **Trigger**: The button it opens from 2. **Panel**: Floats beside the trigger 3. **Arrow**: Points back at the trigger 4. **Content**: One small task 5. **Close button**: Optional, Escape works too 6. **States**: Closed, open, focus, copied ## Variants We sorted every popover design in the Kombai gallery and found five patterns. ### 1. Filter popovers A price range or a set of stages that narrows a list, opened from the filter it changes. - [Pinionfield](https://kombai.com/gallery/inspirations/popover-web-9/) (Web) - [Gildhollow](https://kombai.com/gallery/inspirations/popover-web-31/) (Web) - [Accounts](https://kombai.com/gallery/inspirations/popover-web-20/) (Web) ### 2. Share and people popovers Invite fields, link copying and attendee lists that open from a Share or People button. - [Aldergrid](https://kombai.com/gallery/inspirations/popover-web-23/) (Web) - [Quenchtone](https://kombai.com/gallery/inspirations/popover-web-17/) (Web) - [Russetwave](https://kombai.com/gallery/inspirations/popover-web-14/) (Web) ### 3. Notification popovers Recent activity opened from a bell or an inbox icon, with a way to see everything. - [Dunmere](https://kombai.com/gallery/inspirations/popover-web-27/) (Web) - [Quillrook](https://kombai.com/gallery/inspirations/popover-web-21/) (Web) - [Pippinfold](https://kombai.com/gallery/inspirations/popover-web-16/) (Web) ### 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. - [Stratafold](https://kombai.com/gallery/inspirations/popover-web-3/) (Web) - [Orrelian](https://kombai.com/gallery/inspirations/popover-web-8/) (Web) - [Elmswire](https://kombai.com/gallery/inspirations/popover-web-29/) (Web) ### 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. - [Loamfield](https://kombai.com/gallery/inspirations/popover-web-37/) (Web) - [Brush Lettering](https://kombai.com/gallery/inspirations/popover-web-36/) (Web) - [Quaystead](https://kombai.com/gallery/inspirations/popover-web-4/) (Web) ## Where popovers show up ### Search and booking Guests, trip dates and move-in days picked in place, so the search bar stays short. - [Yonderwick](https://kombai.com/gallery/inspirations/popover-web-48/) (Web) - [Haverlane](https://kombai.com/gallery/inspirations/popover-web-34/) (Web) - [Moraineholt](https://kombai.com/gallery/inspirations/popover-web-5/) (Web) ### Data tools Field mapping, event filters and probe pickers opened from a table, an import or a chart. - [Snowlithe](https://kombai.com/gallery/inspirations/popover-web-6/) (Web) - [Skepwright](https://kombai.com/gallery/inspirations/popover-web-46/) (Web) - [Vireloft](https://kombai.com/gallery/inspirations/popover-web-45/) (Web) ### AI tools Tool pickers, voice settings and upload trays that open from the prompt box. - [Cairnwold](https://kombai.com/gallery/inspirations/popover-web-26/) (Web) - [Feldspire](https://kombai.com/gallery/inspirations/popover-web-1/) (Web) - [Nocturlabe](https://kombai.com/gallery/inspirations/popover-web-10/) (Web) ## Popover vs similar components | | [Popover](https://kombai.com/glossary/popover/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Dialog](https://kombai.com/glossary/dialog/) | [Coach marks](https://kombai.com/glossary/coach-marks/) | |---|---|---|---|---| | Opens from | A button or field | A button | An action or event | The app, unprompted | | Holds | A small task or detail | A list of commands | A decision or short form | A tip about a feature | | Closes | Click outside or Escape | After a choice | After an answer | After Next or Got it | ## 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 - [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) - [Dialog](https://kombai.com/glossary/dialog/) - [Coach marks](https://kombai.com/glossary/coach-marks/) - [Date picker](https://kombai.com/glossary/date-picker/) ## References - [MDN: Using the Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using) - [MDN: Fallback options for CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding) - [WAI-ARIA Authoring Practices: Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) - [WAI-ARIA Authoring Practices: Tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)