Resources
Related Guidelines
When to use tooltips
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 tooltip 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
Tooltip should always provide short, contextually relevant information. To avoid overwhelming the user with content, only one tooltip is displayed at a time. Tooltip use a fade in transition when they appear and a fade out transition when they disappear.
Links with tooltip: The Interaction behavior is to surface the tool on hover and focus.
Info link with tooltip: The Interaction behavior is to surface the tool on click.
All tooltip follow a consistent visual style and have a max width of 260 px, but may be dismissed differently depending on the context of use.
A tooltip is activated on hover and focus, and 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.
The default orientation of a standard tooltip.
Additional ways of orienting a standard tooltip, depending on the context.
A standard tooltip at its max width, 260px.
A standard tooltip that provides auto-save feedback and dismisses itself.
Our tooltip now comes with an optional header.
A standard tooltip that can be immediately dismissed.
Tooltip are also used to provide in-context help in the info link pattern.
On the other hand, if you’re looking to point out a new feature, check out the guidance tooltip pattern.
Accessibility
It’s important to have a tooltip appear on both hover and focus states. If the tooltip is only activated on hover, keyboard users will not be able to access the information.
Fixed |
---|
|
Flexible |
---|
|