Popover

A popover is a small overlay that appears close to a specific UI element, usually triggered by user interaction with it, such as hovering or clicking.

Popovers provide additional contextual information, options, or actions related to the UI element they are associated with.

Characteristics

Popovers are typically non-modal. They usually don't use backdrops since dimming the interactive content wouldn't make sense.

Popovers usually use the 'light dismiss' - The popover will disappear if a user hovers out of the element that triggered it or clicks out of the popover.

Categorization

Popovers are a type of popup. They are on the same level as dialogs and other groups like alerts, notifications, lightboxes, etc.

Examples

👉 Popover menu

👉 Popover menu — It presents a set of options in a compact form. It typically appears when the user interacts with a specific trigger element, such as a button or icon. It is designed to be unobtrusive and contextually relevant to the user’s interaction.

🎨 Color Picker

🎨 Color Picker — It offers users a visual interface to select colors for design or customization purposes. It can provide various mechanisms, such as sliders, color palettes, or input fields.

📆 Date picker

📆 Date picker — It allows users to select specific dates. They usually offer options to navigate through the calendar or input date and time values.

---

Popovers in design systems

Material Design

In the ‘menus’ category, we see a 👉 popover menu that is displayed on top of the content after a user interacts with a trigger, a button, for example. They show a list of options to choose from.

Material Design — Popover menu (Source: https://m3.material.io/)

📆 Date pickers are also listed as a separate component. They are defined because of their function, choosing the date, not their structure. Date pickers come as a popover on desktop or a modal dialog on mobile.

Material Design — Date picker (Source: https://m3.material.io/)

🍎 Human Interface Guidelines

Popover menus — Context menus, dock menus, edit menus, and general menus. They all provide functionality related to a triggered item without blocking other UI elements.

HIG — Popover menus (Source: https://developer.apple.com/)

Popovers — ‘A popover is a transient view that appears above other content when people click or tap a control or interactive area.’ and that we should ‘use a popover to expose a small amount of information or functionality.’ So that aligns with our definition 🚀.

HIG — Popover (Source: https://developer.apple.com/)

🎨 Color well (a popover color picker) — It’s included in the ‘selection and input’ section together with other components, like text fields, pickers, toggles, etc.

HIG — Color well (Source: https://developer.apple.com/)

Polaris by Shopify

‘Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.’ 

Polaris by Shopify — Popover (Source: https://polaris.shopify.com/)