Popover
Popovers are non-modal transient containers that appear above other content. They disclose lists of choices or supplemental information.
- CSS
- Marko
- React
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.
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.
Title
Required. Match the title to the trigger label so users know the popover continues their action.
- Use sentence case
- No ending punctuation
- Use a noun or noun phrase
- Aim for 1-3 words
Search field
Popovers can include a search text field at the top to quickly filter a list using keywords. When the popover is presented from a filter button, focus is moved to the text field. Entering keywords filters the list to the best matches available. The list remains filtered after selection until the search field is cleared.
Body
The popover body contains the primary content. Common body content includes radio button groups, checkbox groups, and option lists.
List items
Required. Write each option so it's distinct and self-contained. Users shouldn't need to read the full list to understand any single choice.
- Use sentence case
- No ending punctuation
- Use a noun or noun phrase
- Use parallel structure
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.
Button labels
Required if using a button in the footer. Use a verb that makes the action and outcome immediately clear.
- Use sentence case
- No ending punctuation
- Use a [verb] or [verb] [noun] pattern
- Aim for 1-2 words
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.
Presentation
Popovers appear after interacting with another UI element, typically a button.
Dismissal
Popovers can be dismissed by:
- Interacting with the button that presented it again
- Making a decision within the popover
- Interacting with other page content
- The ESC key
Scrolling
Scrolling is enabled whenever content extends beyond the popover container.
Small
Popover menus transition to bottom sheets on small screens. However, iOS can use the native context menu for short action lists where appropriate.
Bottom sheet
iOS context menu
Web large
Medium and large screens on web use popovers for menus, filters, and other views.
Native large
Medium and large screens on native use center sheets or panels for menus and filters.
