#### 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
Some tooltip text!