Tool Tips

Tooltips are user-triggered messages that provide additional information about a page element or feature.


See the Pen Tool tips by USANA UX (@usana_ux) on CodePen.


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.


  • Content - Provides helper text.
  • Tip - Associates specific trigger elements with container.
  • Trigger - Element displaying a tooltip when it is focused or hovered


Hover, tap, click, or focus on the tooltip to display informative, yet unimportant text.


Designers and developers should use this specification to create tool tips with pixel-perfect details.

Best Practices

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