Icon
Tooltip
Default
Hover
Disabled
1. Usage
Don't use infotips to call out information that is vital to task completion. Infotips are best used when they provide additional, but non-critical information about a function or element on the screen. Since infotips display a tooltip, the same guidelines for using tooltips apply.
2. Auxiliary Information
Don't use an infotip to provide redundant information. Infotips should only provide auxiliary information. Infotips can be used in conjunction with a dotted link tooltip if additional, supportive information is needed.
3. Placement
Position infotips to the right of the element they are supporting.
Keep the information short and concise. See Tooltips for writing guidelines.
Related Components
Additional Reading
World Leaders in Research-Based User Experience. “Indicators, Validations, and Notifications: Pick the Correct Communication Option.” Nielsen Norman Group, https://www.nngroup.com/articles/indicators-validations-notifications/.
“Web Content Accessibility Guidelines (WCAG) 2.0.” W3C, www.w3.org/TR/WCAG20/.
“Tooltip Widgets (or: Screen Tip, Balloon).” Accessibility Developer Guide, www.accessibility-developer-guide.com/examples/widgets/tooltips/.