Last Updated on Sep 29, 2022
Tooltips are user-triggered messages that provide additional information about a page element or feature. They are generally a small, floating content block triggered via hovering over or focusing on an element.

Design Principles

  • Use a tooltip when a form label or product jargon needs explanation or definition.
  • Use a tooltip when a graphic/icon needs additional explanation or definition.
  • Any interaction away from the tooltip causes it to close (e.g. lose focus, click on something away from visible tooltip region).
  • Interactive elements are not allowed inside tooltips. If interactive elements are needed, consider using a popout, a modal, etc.
  • Line breaks in text are allowed, but do not use it when a long list or copy would require scrolling.
  • The max width of a tooltip is 384px, which is our layout-400 token. Whenever possible, align the width of the tooltip to one of our layout design tokens.

Do's and Don'ts

Keep copy to a minimum.
Use whenever the user would reasonably need more information.
Don’t trigger tooltips on any interaction other than hover.
Don’t add any UI to tooltips.