Tooltips


<button type="button" class="btn btn-secondary mt-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-secondary mt-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-secondary mt-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary mt-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. The data-placement attribute specifies the tooltip position.

Disabled elements


<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
   <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0", and override the pointer-events on the disabled element.

Tooltips


<button type="button" class="btn btn-primary mt-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-success mt-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-danger mt-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-info mt-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left Using background colors

Tooltips


<button type="button" class="btn iq-bg-primary mt-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn iq-bg-success mt-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn iq-bg-danger mt-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn iq-bg-info mt-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left Using Light background colors

Hover elements


<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
   <div class="arrow"></div>
   <div class="tooltip-inner">Some tooltip text!</div>
</div>

Hover over the buttons below to see the tooltip.

Hover over me