Do show one popover at a time. Always close an open popover before opening a new one.
Popover
v1.0.0
Popovers are non-modal transient containers that appear above other content. They disclose lists of choices or supplemental information.
- Skin
- CoreUI
- React
Expanded component guidance coming soon.
This page will be updated soon with expanded guidance and clarity from Design, Platform, and Accessibility teams.
Contextual
Directly relates to its trigger element, which is usually a button.
Progressive
Progressively discloses additional choices or information.
Flexible
The popover 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.
Search box
A search box is optional. Search boxes allow users to filter large lists quickly. A typeahead pattern can be used to show the match between the user’s query and the values in the list.
Footer
The footer is optional and contains up to two actions. Use the footer when there are multiple decisions within the popover that need to be explicitly submitted.
The primary button submits content and closes the popover. The secondary button cancels the decision 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.
Presentation
Popovers appear after interacting with another UI element, typically a button.
Dismissal
Popovers can be dismissed multiple ways:
- 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.
Navigation
Popovers use push navigation when navigating to a child view. The new content will replace the primary view and a title with a back action will appear at the top of the popover. List items in a child view will indent further to align with the title.
Keyboard navigation
A popover is launched when focusing on and selecting the trigger element using the ENTER or SPACE key. The ESCAPE key can be pressed at any time within the popover to collapse it and return focus to the trigger element.
Compact
Popover menus transition to bottom sheets on compact screens. However, iOS can use the native context menu for short action lists where appropriate.
Large screens
Larger screens use popovers for menus, filters, tips, and other views.
Stacking
Don’t stack popovers or show multiple popovers on the screen at once.
Hover
Do ensure popovers are explicitly invoked by pressing or selecting a button.
Don’t launch a popover on hover.
Static elements
Do use buttons and other interactive elements to launch a popover.
Don’t invoke a popover from a static element.
