Popover

v1.0

Popovers are non-modal transient containers that appear above other content. They disclose lists of choices or supplemental information.

CSS
Marko
React

Considerations

Contextual

Popovers directly relate to its trigger element, which is usually a button.

Progressive

Popovers progressively disclose additional choices or information.

Flexible

Popovers can contain a variety of content of varying complexity.

Anatomy

Header
Body
Footer
Container

Properties

Header

The header is optional for popovers without navigation. The header appears by default in child views and contains a title and back button. The title maintains the context of the previous view.

Body

The popover body contains the primary content. Common body content includes radio button groups, checkbox groups, and option lists.

Footer

The footer is optional and usually includes a button to take action on a list. Use the footer when there are multiple decisions within the popover that need to be explicitly submitted.

The button submits the value(s) and closes the popover.

Tip

A tip is available to create a stronger relationship between the trigger element and the popover. A tip is recommended when the trigger element may be ambiguous or unclear due to surrounding content.