Popovers
A popover uses a hover, focus, or tap to display an interactive trigger element—such as a chart target area, button, or icon.
Types
Default, description only.
Header and description.
Guidelines
Popovers present contextual snippets of rich information, menu options, and enable light editing. One popover can appear at a time and contain different types of text and interactive elements.
Anatomy
- Trigger: Activates a popover based on a click, hover, or focus.
- Header: (Optional) Describes the function of the popover.
- Content: The content area contains text, images, links, and other items.
- Tip: The indicator shows the relationship between a popover and where it was triggered.
Interaction
A popover appears automatically upon hover or focus of its trigger element. The popovers fade out when interacting with an area or element outside of its trigger or when the cursor leaves it.
Specifications
Based on these specifications, designers and developers can create pixel-perfect popovers.
Do
- Allow the user to interact inside or outside of the popover.
- Include a caret to help give users context to where it is stemming from.
- Want to not let the user lose context, but still provide additional useful information about specific elements.
- When it is not critical for the user to act upon the information.
Don't
- Use when there’s only non-interactive text.
- Use for forms or image content.
- Use when people don’t need to see the rest of the screen.