Tooltips

Tooltips contain brief messages that appear in response to a user action.

Web

When to Use

  • 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

A tip can be used on any screen and can be implemented anywhere on the screen, making it more contextually relevant than a dialog.

Appearance & 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.

All Tooltips follow a consistent visual style and have a max width of 250px, 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, a Tooltip may be dismissed based on a condition tied to the user interaction. For example, during Sign Up, a Tooltip can be anchored to the form field to provide the user with username or password requirements, or to indicate that she may already have an existing account.

Tooltips are also used in the helpful links 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 pattern.

page-elements-tooltips-01a

The default orientation of a Standard Tooltip

page-elements-tooltips-01b

Additional ways of orienting a Standard Tooltip, depending on the context

A Standard Tooltip at its max width, 250px

A Standard Tooltip at its max width, 250px

page-elements-tooltips-01d

A Standard Tooltip that provides auto-save feedback and dismisses itself.

A Standard Tooltip that can be immediately dismissed

A Standard Tooltip that can be immediately dismissed

iOS

When to Use

A tip can be used on any screen and can be implemented anywhere on the screen, making it more contextually relevant than a dialog.

Appearance & Behavior

Place tips in proximity to the feature/element they refer to. Keep content short and remove the tip once interaction begins (e.g. when screen is touched).

Page-level tooltip on an iPhone

Page-level tooltip on an iPhone

Field-level tooltip on an iPad

Field-level tooltip on an iPad

Text 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.
© Intuit 2016 | Terms of use