
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. Short and Concise
Keep the information short and concise. 2-3 lines is the recommended length. Long blocks of text can be difficult to read and can obscure related content.
3. 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.
4. Placement
Position infotips to the right of the element they are supporting.

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/.