Popovers are used to display transient content such as menus, options, additional actions, and more. They stand out visually through stroke and drop shadow and float on top of the interface.
The placement for a popover is very contextual, as it depends on where the source is located on the screen. When the source is a rectangular shape (a dropdown, button, etc.), there are 4 placement options. The default is left-aligned below the source.
When the source is a square (icon-only button, tool, etc.), there are 8 different placement options. The default is, again, left-aligned below the source.
Popovers can be aligned in 2 different ways depending on the down state of the source. When the source’s down state has a frame (standard dropdown, quiet action button, etc.), the popover should be aligned to that frame. However, when the source’s down state does not have a frame (quiet dropdown, tool, etc.), the popover should be aligned to the content as shown.
The space between the popover and its source is the same no matter the placement: 6 px on desktop scale and 8 px on mobile scale. The only exception is a quiet dropdown, which does not have any space between the popover menu and the field button.
Whenever a popover is displayed, the source should take its down/selected state to indicate the connection between the popover and its source. By default, a popover does not have a tip.
In some cases where the source does not have a visually distinct down state, use a popover with a tip to clearly indicate the connection to its source. The tip should be center aligned with the source.
When displaying a popover, it should animate from its source to reinforce the connection between the popover and its source. It should fade in and slide with a subtle motion from the source.
A popover can be dismissed by either clicking/tapping anywhere outside the popover (including clicking the source again), or selecting an option/taking an action inside the popover.
A popover can contain menus or various combinations of components (avatar, color picker, etc.) to display additional options and actions.
Popovers don’t have an intrinsic maximum height, but you should define one that is relevant to your specific context. When the content exceeds this maximum height, enable scrolling. In some cases, the entire content can be scrollable and in other cases, there can be a fixed header that stays anchored at the top of the popover.
Popovers have a top and bottom padding: 4 px on desktop scale and 5 px on mobile scale. However, when there is a fixed header, the top padding starts below the fixed header.
When navigating to nested content within a popover, another popover should be displayed on top where space permits. This additional popover should have a 4 px overlap on desktop scale and a 5 px overlap on mobile scale.
Another option for displaying nested content is by replacing the popover content entirely by the nested content. Remember to include a fixed header with a back arrow to allow users to navigate back.
|Apr 19, 2019||5.0.0|