Components

## Popovers

Examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

#### Basic Examples

Click the following button to see the basic example of popover.

Uses Example

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

#### Four Directions

Use `data-placement` value: `top, right, bottom`, and `left` direction.

Uses Example

    <button type="button" class="btn btn-primary" data-container="body"
        data-toggle="popover" data-placement="top"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        <span>Popover on top</span>
    </button>

#### Dismissible Popover

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

Uses Example

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

#### Dismissible Popover

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

Uses Example

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