#Overview
A popover is an informative layer that appears above other content on the page.
It displays additional content or interactive elements to support the user flow. Popovers are triggered when users hover, focus on, or click an interactive element.
Popovers have different contents depending on the application. They can contain varying text, illustrations or interactive elements like buttons or links.
#When to use
- To display additional content to support the user flow, but is not that important to show right away
#Don’t use for
- Explaining a user interface element or feature with a short label (use a Tooltip)
- For more complex content, depending on the context and application, consider using a Dialog
#Anatomy
- Title (mandatory)
- Content area: Contains all additional informative elements
- Bottom area: For interactive elements such as links, buttons or other related actions
- Icon button: Closes the popover
#Desktop
Spacing
There are two sizes for popovers on desktop. Popover Normal is the default, while Popover Large should only be used to display large content.
- Popover Normal
- Popover Large
#Mobile
Spacing
On mobile devices, a popover appears as a bottom sheet and there is only one size. Bottom sheets are surfaces that extend across the full width of a screen. They are elevated above the primary content and anchored to the bottom of the screen.
#Best practices
#Don’t interrupt the flow
Popovers should be a purposeful and integrated element, not interrupting or interfering with the user flow.
#One action per popover
Do
Generally one type of interaction is enabled per popover (1 popover = 1 action).
Don't
Multiple interactions can confuse and overwhelm the user.
#Always display an exit point
Do
A popover always contains an exit point ("x" icon).
Don't
Do not use a popover without an “x” icon.
#Less is more
Do
Popover elements, like text or illustrative content, should be generally as short and compact as possible.
Don't
Input fields or media are not used in popovers.
#But sometimes, more is more
Do
Some popovers require more information. In this situation, a desktop popover displays a “Show more” action (or “Show less” if the content has been expanded).
Do
For lengthier content on mobile, the user can scroll within the popover area (bottom sheet).
#Placement
Generally, popovers are used as contextual hints to present further information or explanation.
#Desktop
#Mobile
#Behavior
#Appearing on mobile
The dark backdrop enters using Linear (no easing) with opacity. The mobile popover (bottom sheet) enters at the same time but it is always at 100% opacity, giving the impression that it is hiding off the edge of the screen before being triggered.
The popover starts from the bottom of the screen and moves upwards into full view using Entry easing.
#Disappearing on mobile
Popovers on mobile are dismissed by tapping the close icon (x) or anywhere outside of the popover.
The popover (bottom sheet) exits first by moving downwards using Slide Down easing. Shortly before the popover completes its exit, the dark backdrop disappears using Linear (no easing) with opacity.
#Appearing on desktop
Desktop users can trigger a popover by hovering, focusing or clicking on the information icon (i).
The desktop popover enters using Linear (no easing) with opacity while simultaneously moving to the right by 4px using Entry easing. This sideway movement adds visual interest and follows our motion principle “Playful”.
#Disappearing on desktop
Popovers triggered on hover disappear:
-
by clicking the close icon (x)
-
when the mouse cursor leaves the information icon (i) Popovers triggered on click disappear:
-
by clicking the close icon (x)
-
by clicking outside the popover container (including another popover) The popover disappears simply using Linear (no easing) with opacity.