Popover
v1.0
Popovers are non-modal transient containers that appear above other content. They disclose lists of choices or supplemental information.
Popovers are non-modal transient containers that appear above other content. They disclose lists of choices or supplemental information.
Popovers directly relate to its trigger element, which is usually a button.
Popovers progressively disclose additional choices or information.
Popovers can contain a variety of content of varying complexity.
Popover menus transition to bottom sheets on small screens. However, iOS can use the native context menu for short action lists where appropriate.
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.
Required. Match the title to the trigger label so users know the popover continues their action.
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.
The popover body contains the primary content. Common body content includes radio button groups, checkbox groups, and option lists.
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.
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.
Required if using a button in the footer. Use a verb that makes the action and outcome immediately clear.
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.
Popovers appear after interacting with another UI element, typically a button.
Popovers can be dismissed by:
Scrolling is enabled whenever content extends beyond the popover container.
Medium and large screens on web use popovers for menus, filters, and other views.
Medium and large screens on native use center sheets or panels for menus and filters.
Bottom sheet
iOS context menu
Do show one popover at a time. Always close an open popover before opening a new one.
Don’t stack popovers or show multiple popovers on the screen at once.
Do ensure popovers are explicitly invoked by pressing or selecting a button.
Don’t launch a popover on hover.
