Tool Tips
Tooltips are user-triggered messages that provide additional information about a page element or feature.
Types
Guidelines
All tooltips should display unique data and not repeat information shown near the referenced element. Dates provided in tooltips should be brief and to the point.
Anatomy
- Content - Provides helper text.
- Tip - Associates specific trigger elements with container.
- Trigger - Element displaying a tooltip when it is focused or hovered
Interaction
Hover, tap, click, or focus on the tooltip to display informative, yet unimportant text.
Specifications
Designers and developers should use this specification to create tool tips with pixel-perfect details.
Best Practices
Do
- Use when the description content would be too much information to include inline.
- When expert users have seen it many times.
- Use for icon-only buttons or for a button with an associated keyboard shortcut.
Don't
- Use to restate visible any UI text.
- Use an excessive amount of.
- Use to communicate critical information.
- Use if they contain any links or buttons.