Theme:
Tooltip
Tooltips display informational text on hover. They are CSS-only and support four positions and semantic color variants.
Positions
Hover over the buttons below to see the tooltip in each position.
<div class="dui-tooltip" data-tip="Tooltip on top">
<button class="dui-btn">Top (default)</button>
</div>
<div class="dui-tooltip dui-tooltip-bottom" data-tip="Tooltip on bottom">
<button class="dui-btn">Bottom</button>
</div>
<div class="dui-tooltip dui-tooltip-left" data-tip="Tooltip on left">
<button class="dui-btn">Left</button>
</div>
<div class="dui-tooltip dui-tooltip-right" data-tip="Tooltip on right">
<button class="dui-btn">Right</button>
</div>
Color Variants
<div class="dui-tooltip dui-tooltip-primary" data-tip="Primary tooltip">
<button class="dui-btn dui-btn-primary">Primary</button>
</div>
<div class="dui-tooltip dui-tooltip-success" data-tip="Success tooltip">
<button class="dui-btn dui-btn-success">Success</button>
</div>