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.


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







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







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







Tooltips are triggered by hovering over the target element.






Where to use

✅ Unlabeled icons

✅ Buttons

✅ Links