Pattern Library

Tooltips

Tooltips are short text descriptions that appear on hover. Use them to add clarity to a user interface element but be cautious not to use them as a crutch for obscure or unidentifiable elements.

Basic Tooltips

A simple tooltip, can be added to buttons or icons to clarify their function or meaning. Make sure the tooltip is not the only way to discern function, because users will not be able to see tooltips in some situations such as on touchscreen devices.

<button type="button" class="button button--primary" data-toggle="tooltip" title="This is a button">
  Hover for tooltip
</button>

Positioning

By default, tooltips are positioned above the element, but they can be positioned above, to the right, below, or to the left of any element using the data-placement attribute.

<button type="button" class="button button--flat button--left" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="button button--flat button--left" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="button button--flat button--left" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="button button--flat button--left" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>