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 disabledattribute 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-eventson 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