Usage
Popovers are used to help users understand unknown or unfamiliar controls, features, or workflows that are not described directly on the page.
Popovers are also used:
- to provide information to users when they need it, and to help free up screen space.
- when more detailed information is needed, such as a header and multiple lines of body text.
- to provide more actions to the user, such as a walkthrough or text link.
- when the content needs to remain open without being moused over.
Anatomy
Popovers consist of a shape background, shadow, text, and can include a variety of components. Unlike tooltips, there may be actions included within popovers such as close, next, back, and text links.
Required
Popovers must always include a blue top bar, a close button in the top right, and either header text or body text to provide information.
Optional
Popovers can include primary and secondary buttons for walkthroughs, and text links to link users to more information.
See the Design specs for detailed sizing and spacing information
States
Popovers are anchored to the page element in which they are referencing and should not be critical for the user to read.
- The popover positioning will default to the right of whatever page element is being clicked.
- Special use cases may arrive in which the bottom, top, and left tooltip positions may be used if there is not sufficient space to display the popover, such as a top bar popover.
Types
Header/action
Header/action provides actions to the user, such as a walkthrough.
Header/body
Header/body provides information to the user such as a header and multiple lines of body text or a text link.
Header/body/action
Header/body/action provides actions to the user, such as a walkthrough. It also provides information to the user such as a header and multiple lines of body text or a text link.
Behavior
Opening and closing popovers
Popovers trigger on click and remain active until the user either clicks off of the page element or clicks close on the popover.
Best practices
Button Groups should follow the best practices outlined in the Button component when included.
Popover vs. tooltip
A popover can hold more detailed information and multiple lines of text.
A tooltip should not contain detailed information and multiple lines of text.
Popover positioning
A popover should be display all of its contents regardless of where it is positioned on the page.
A popover should not be cut off to fit within a container such as a card.
Alternate considerations
- A tooltip may be the appropriate component if the message is a small text hint explaining the anchored element, if the message needs to only be visible on hover, and if the message can disappear when the user moves away from the element.