Skip to content

Tooltips

Tooltips provide context information labels that appear on hover and focus.

Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements.

And add the tooltip-right, tooltip-bottom or tooltip-left class to define the position of a tooltip. By default, the tooltip appears above the element.

html
<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>

Multiline tooltips

Add the \n string between any text for multiline tooltips.

html
<button class="btn tooltip" data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text">multiline tooltip</button>