Version 5.0.0

Popovers

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.

Placement#


Rectangular source#

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 picker, button, etc.), there are 4 placement options. The default is left-aligned below the source.

Image illustrating a rectangular shape source with a left-aligned popover below it and a rectangular shape source with a right-aligned popover above it.

Square 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.

Image illustrating a square shape source with a left-aligned popover below it and a square shape source with a horizontal-aligned popover on its right side.

Alignment#

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 picker, 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 picker, tool, etc.), the popover should be aligned to the content as shown.

Image illustrating two different popover alignment strategies that depend on the down state of the source. From up to down, a standard dropdown trigger button that has frame with the popover aligned to button frame, a quiet dropdown trigger button that has no frame with the popover aligned to button label text and a Pen tool button that has frame with the popover horizontal-aligned to its frame.

Spacing#

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 picker, which does not have any space between the popover menu and the field button.

Image illustrating the space between the popover and its source on desktop scale. From up to down, an action button source with the left-align popover below it and a purple square shape source with the popover above it. Between the popover and the trigger is a pink horizontal rectangular to indicate the space should be 6 px height.

Behaviors#


Key example of source indication for popover. The first one is a country selection dropdown with a gray trigger button. The second one is a gray tool button with popover horizontal-aligned on it right and last one is a blue text label quiet button with popover left-aligned below it.

Source indication: clear source#

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.

Key example of ambiguous source for a popover. Four square shape objects with different color in a row. A popover with a tip is above the second square.

Source indication: ambiguous source#

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.

Animation displaying the behavior of a popover from its opening to closing.

Animation#

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.

Dismissing a popover#

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.

Popover content#


Content types#

A popover can contain menus or various combinations of components (avatar, color picker, etc.) to display additional options and actions.

Key example for the content of a popover. A popover with the text only option for country selection. A popover with icon plus text option. A popover with avatar in it and a popover with color picker in it.Key example for the content of a popover. A popover with the text only option for country selection. A popover with icon plus text option. A popover with avatar in it and a popover with color picker in it.

Fixed header and scrolling#

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.

Key example of the content scrolling in the popover. A popover with entire scrollable content and a popover with fixed header and scrollable body.Key example of the content scrolling in the popover. A popover with entire scrollable content and a popover with fixed header and scrollable body.

Padding#

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.

Key example of the top and bottom padding for the popover content. The first popover without header has 4 px padding on both top and bottom edges. The second popover with header has 4 px padding below the header and above the bottom edge.Key example of the top and bottom padding for the popover content. The first popover without header has 4 px padding on both top and bottom edges. The second popover with header has 4 px padding below the header and above the bottom edge.

Nested content: cascade#

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.

Key example of displaying nested content within a popover. A user settings popover with language selection as nested-cascade popover.Key example of displaying nested content within a popover. A user settings popover with language selection as nested-cascade popover.

Nested content: replace#

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.

Key example of displaying nested content within a popover. A user settings popover with nested language selection. When user clicks on language option, the entire content will be replaced with various language options with a fixed header at the top.Key example of displaying nested content within a popover. A user settings popover with nested language selection. When user clicks on language option, the entire content will be replaced with various language options with a fixed header at the top.

Usage guidelines#


Popovers or trays?#

Trays can be used as alternatives to popovers on small screens. Trays should be used when exposing a volume of content that is too overwhelming for popovers.

Image illustrating popover on Mobile device.

Changelog#


DateNumberNotes
Apr 20, 20195.0.0
  • This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)