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.
- 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
- 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.
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.
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, 250px.
A standard tooltip that provides auto-save feedback and dismisses itself.
A standard tooltip that can be immediately dismissed.
- 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.
- 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.