Tooltip

What

A tooltip is a temporary pop up window that explains something that would be important to users, but might not be obvious to everyone

Why

To help some users with information that doesn't fit elsewhere in the visible design

Where

Typically next to a label or other text field, denoted by a small icon or short text

Best Practices

  • Should be shown when user clicks on icon or mouse hovers over icon
  • Shows information about the “paired element” it is close to
  • Shouldn’t be used for vital information.
  • Should be for edge cases.
  • Should be very brief and helpful. Don’t include information already visible on the page.
  • Include an arrow if there are multiple icons the tip could be pointing to.
  • Be consisitent with tooltips throughout site or app
  • Can be helpful for unlabeled icons

Related Principles

Design Systems

Design Systems

A design system is a set of design standards for a company or a specific project. The primary elements of a design system are: color & text styles, icons & illustrations, and commonly used components. It can also include things like code standards, layout...

UX/UI Design Glossary

UX/UI Design Glossary

Chrome Visual elements that provide users information about or commands to use the screen's content. Chrome is not part of the content itself. Examples would be buttons, labels, and menus. Edge Case An uncommon situation when a user's experience falls outside the...