Tooltips contain brief messages in response to a customer action. A tip can appear on any screen and anywhere on the screen, so it’s more contextually relevant than a dialog.
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 |
- Tooltip background color is #393A3D
- Text size 12px white/#FFFFFF
- Tip connector is 16px indented from edge
- Padding around tooltip is 16px
- Max width of tooltip is 260px
- 1px border(Gray03, #8D9096)
- 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.
|
