Tooltip

Definition: A tooltip displays information about the targeted UI element.

When to use

Use a tooltip to display supplementary information about an UI element. The content is usually concise and provides a quick description or explanation of the associated item's function.

Anatomy

  1. Helper text
  2. Title
  3. Tooltip
  4. Tip (Large only: top, right, left, bottom)

 

 

 

 

 

Variations

  1. Small
  2. Large
  3. Large with multi lines

 

 

 

 

 

Placement

Tooltips are often positioned near the associated UI element, usually above or below it, to avoid obstructing the user's view.

 

 

 

 

 

Trigger

Tooltips are triggered by hovering over the target element.

 

 

 

 

 

Where to use

✅ Unlabeled icons

✅ Buttons

✅ Links