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âââ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âââ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âââ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
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.
đ 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.
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.
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 đ.
đš 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.
âPopovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.ââ
Last updated