Tooltips contain brief messages that appear in response to a user action. A tip can be used on any screen and can be implemented anywhere on the screen, making it more contextually relevant than a dialog.

Usage

Use tooltips:

  • To provide help while filling out a form
  • To show errors while filling out a form
  • To call the user’s attention to important recent activity

Content guidelines

  • Tooltip capitalization is sentence case
  • Use tooltips to give more info about filling out a field, such as a description, required formatting, and restrictions
  • Punctuation: use a period at the end of a tooltip only if it’s a complete sentence. Similarly, if any tooltip has a second sentence, all sentences in the tooltip require a period.

Appearance and behavior

Tooltips should always provide short, contextually relevant information. To avoid overwhelming the user with content, only one tooltip is displayed at a time. Tooltips use a fade in transition when they appear and a fade out transition when they disappear.

Tooltip with fade

All tooltips follow a consistent visual style and have a max width of 250 px, but may be dismissed differently depending on the context of use.

A tooltip may dismiss itself after a brief moment, as in the case of a ‘Draft Saved’ message. In some cases, the tooltip may also include a close icon that allows the user to immediately dismiss it.

In special circumstances, such as editing complex forms, the user can dismiss a tooltip based on a particular condition. For example, during signup, a tooltip can be anchored to the form field to provide users with username or password requirements, or to indicate that they may already have an existing account.

Tooltips are also used in the info link pattern to help provide in-context help. On the other hand, if you’re looking to point out a new feature, check out the guidance tooltip pattern.

Default tooltip container

The default orientation of a standard tooltip.

Tooltip tip positions

Additional ways of orienting a standard tooltip, depending on the context.

Tooltip maximum size

A standard tooltip at its max width, 250px.

Default tooltip

A standard tooltip that provides auto-save feedback and dismisses itself.

Dismissable tooltip

A standard tooltip that can be immediately dismissed.

Launch Preview
x
px wide

Fixed

  • Tooltip background color #393A3D.
  • Text size 12px white/#FFFFFF.
  • Tip connector is 8px indented from edge.
  • Padding around tooltip 15px.
  • Max width of tooltip 250px.
  • Images aren’t supported inside the tooltip.

Flexible

  • You can use headline property to add a title to the tooltip.
  • Focus and hover are the two supported triggers for the tooltip.
  • Position of the tip connector. The component has edge detection that helps keep it from view and not beyond the edge.
  • You can bring emphasis to particular words using bold.
  • You can use a “Close X” option as opposed to a timed dismiss. Mainly used when more time is needed to read lengthier copy content within the tooltip.
  • Was this Helpful?
  •