Tooltips


Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen.

  • They can be used to provide information about concepts/terms/actions that are not self-explanatory or well known.
  • An alternative use of tooltips is to provide information on a disabled actionable element, e.g. for disabled buttons, providing information about why they are disabled.

Avoid:Using tooltips to provide instructions or guidance. They shouldn't be used to show rich information including images and formatted text and avoid placing over plain text or other places where they are not discoverable.

View example of the tooltips pattern

Design

For more information view the tooltips design spec, which includes the specification in markdown format and a PNG image.

For an alternative way of displaying discoverable information view our contextual menu component.