Skip to content
Design System

Popovers

A popover is a small overlay that displays supplemental information to the user. It can contain rich content and is triggered when the UI element it relates to is selected.

Show developer docs

Design

Section titled “ Design”
Select a button to view the popover.
Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover topSed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover rightSed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover bottomSed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover left

Best practices

Section titled “ Best practices”

Use popovers for non-essential information that provides the user with additional guidance or actions.

  • Can contain a header, formatted text, links, etc.
  • Displaying a popover requires a user action (click, tap, or select via key command).
  • Dismissing a popover also requires a user action.
  • Be mindful of placement - a popover should not obscure critical elements on the page.

Accessibility

Section titled “ Accessibility”
  • Popovers should be operable using the keyboard alone.
  • Popovers should be announced by screen readers.
  • When a popover is opened, focus should be moved to the popover so that keyboard users can interact with it.
  • When the popover is closed, focus should be returned to the element that triggered it.

For more information, see our accessibility guidelines.

Design resources

Section titled “ Design resources”
View component in Figma