Tooltip

Small pop-up that shows information when you hover on a related UI element

How they help

Tooltips provide extra information abut a specific UI element and contain a short text message.

Image of an inverted tooltip

Example of tooltip

 

 

Anatomy

  1. Container: box that contains tooltip text
  2. Text: clear and concise text
  3. Beak: points to the element the user hovered over
Image of checkbox for anatomy

Visual reference for anatomy

 

 

 


Designer resources