Tooltips
Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.
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.
<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.
<button class="btn tooltip" data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text">multiline tooltip</button>