#### Popovers

`

    <button type="button" class="btn btn-lg btn-danger mt-2" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

`

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

#### Dismiss on next click

`

    <a tabindex="0" class="btn btn-danger mt-2" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

`

Use the `focus` trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

Dismissible popover

#### Disabled elements

`

    <span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
       <button class="btn btn-primary mt-2" style="pointer-events: none;" type="button" disabled>Disabled button</button>
    </span>

`

Elements with the `disabled` attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper `<div>` or `<span>` and override the `pointer-events` on the disabled element.

#### Hover elements

`

    <span class="d-inline-block" data-trigger="hover" data-toggle="popover" data-content="Disabled popover">
       <button class="btn btn-primary mt-2" style="pointer-events: none;" type="button" disabled>Disabled button</button>
    </span>

`

For disabled popover triggers, you may also prefer `data-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

#### Four directions

`

    <button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
    <button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
    <button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
    <button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>

`

Four options are available: top, right, bottom, and left aligned.

#### Popovers With Color

`

    <button type="button" class="btn btn-primary mt-2" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
    <button type="button" class="btn btn-success mt-2" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
    <button type="button" class="btn btn-danger mt-2" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
    <button type="button" class="btn btn-info mt-2" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>

`

Four options are available: top, right, bottom, and left aligned.

#### Popovers With Color

`

    <button type="button" class="btn iq-bg-primary mt-2" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
    <button type="button" class="btn iq-bg-success mt-2" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
    <button type="button" class="btn iq-bg-danger mt-2" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
    <button type="button" class="btn iq-bg-info mt-2" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>

`

Four options are available: top, right, bottom, and left aligned.