Tooltip

Default

Use .tooltip to display a small floating information box. Add .tooltip-arrow with a placement class to show an arrow.

<div class="tooltip" role="tooltip">
	This is how the tooltip looks
	<div class="tooltip-arrow top"></div>
</div>

Placements

Use placement classes on .tooltip-arrow to change the arrow direction.

<div class="tooltip" role="tooltip">
	Tooltip top
	<div class="tooltip-arrow top"></div>
</div>
<div class="tooltip" role="tooltip">
	Tooltip bottom
	<div class="tooltip-arrow bottom"></div>
</div>

Interactive

Use data-tooltip and data-tooltip-placement to attach an interactive tooltip to an element.

<button class="btn btn-primary btn-solid" type="button" data-tooltip="Tooltip top" data-tooltip-placement="top">
	Hover me (top)
</button>

<button class="btn btn-primary btn-solid" type="button" data-tooltip="Tooltip right" data-tooltip-placement="right">
	Hover me (right)
</button>

<button class="btn btn-primary btn-solid" type="button" data-tooltip="Tooltip bottom" data-tooltip-placement="bottom">
	Hover me (bottom)
</button>

<button class="btn btn-primary btn-solid" type="button" data-tooltip="Tooltip left" data-tooltip-placement="left">
	Hover me (left)
</button>