Tooltip, Popover, and Modal

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:

  • 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.

External links

Here are some examples of existing design systems: