Basic design
<div class="tooltip" role="tooltip">
<div class="tooltip-inner">
Tooltip label
</div>
</div>
On default state is hidden, to be visible add .in class.
<div class="tooltip in" role="tooltip">
<div class="tooltip-inner">
Tooltip label
</div>
</div>
Options
Primary variant
For primary variant add .tooltip-primary class to the tooltip wrapper .tooltip.
<div class="tooltip tooltip-primary left in" role="tooltip">
<div class="tooltip-inner">
Tooltip on the left
</div>
</div>
Secondary variant
For primary variant add .tooltip-secondary class to the tooltip wrapper.
<div class="tooltip tooltip-secondary top in" role="tooltip">
<div class="tooltip-inner">
Tooltip on the top
</div>
</div>
Tooltip position
Add .top, .right, .bottom or .left class to the tooltip wrapper.
<div class="tooltip right in" role="tooltip">
<div class="tooltip-inner">
Tooltip on the right
</div>
</div>
Validation state
Add .tooltip-error.
<div class="tooltip tooltip-error top in" role="tooltip">
<div class="tooltip-inner">
Tooltip on the left
</div>
</div>