Used to display short help texts, mostly when the interface doesn't have enough space to place that information inline. A common use case is showing tooltips when hovering over icon buttons to avoid ambiguity. For displaying more complex content, use the dropdown component.

<aside> 🔸 Note: The tooltips that are used for data visualizations belong to the chart library and have a different styling. More details are available in our section on chart patterns.

</aside>

Anatomy

  1. Trigger (on hover)
  2. Text

https://invis.io/QKYM5YMJVCZ#/430320582_Tooltip_-_Anatomy

Position

Tooltips are shown when hovering over their trigger, and their position is relative to it:

• Top (default) • Bottom • Left • Right

https://invis.io/P7YM6ELTYAS#/430320583_Tooltip_-_Position