Tooltip, Popover, and Modal
Guidelines
Tooltips: Tooltips are floating labels to describe or add additional information when users hover over, focus on, or click an interactive element. Usually 3 words or less.
Popovers: A popover displays rich content in a non-modal dialog to describe or add additional information when users hover over, focus on, or click an interactive element. User can interact with popover content, including selecting text or clicking links.
- Coachmarks: Coachmarks are used for guided tours to onboard people to new interfaces. We rarely use coachmarks. When we do, they follow our Popover style.
Modals: Modals show additional content in a layer above the page with an overlay covering the page behind. Use sparingly.
When to use each component
- For text only, use a tooltip.
- For rich content, such as a heading, link, or data, use a popover.
- For contextual content, use a popover.
- For a temporary change of context, use a modal.
- For forms or images, use a modal.
See also
- We rarely use Coachmarks, which are visually similar to popovers.
- In Performance, we use drawers.
- A navigation drawer is a specific kind of drawer we use for our mobile nav e.g. Material: navigation drawer
- These are like modals.
External links
Here are some examples of existing design systems:
- Atlassian doesn’t have popovers but “Inline dialogs” and distinguishes them from “modal dialogs”
On this page