Skip to content
search icon
clear
Component Status

A tooltip shows when hovered, focused or long-pressed (touch), and displays information such as a text label or a short description.

Guidelines

Tooltips disappear after the mouse is no longer hovering the target area, the focus has moved on or the long-press is released. The information provided should be very short and descriptive and explain icon meanings or differences between components.

Tooltips should aim to have a single line of text, that does not wrap, and it kept to under 80 characters in length. The position of the tooltip is flexible. They are always pointed to the component to which they give information about.

Don't

  • Do not use tooltips that repeat visible UI text.
  • Do not add tooltips to buttons with text.
  • Do not format the text, such as bold or italics.
  • Do not allow tooltips to be cropped outside the frame.
  • Do not add images, such as avatars or icons.
  • Do not move tooltips to follow the cursor.
  • Do not have links within tooltips.
  • Do not use punctuation other than a . in a tooltip.
  • Tooltips are not the place for questions, excitement, etc.
  • Do not spell out numbers, use "12" instead of "twelve"
FigmaExternal linkFigma design sketch for tooltip

Demo

Edit this page on GitHub