#### Popovers

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

Table of Contents

- Static popover
- Examples
  1. Four directions
  2. Dismiss on next click

#### Static popover

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

### Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

#### Examples

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

##### Four directions

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

    									<button type="button" class="btn btn-secondary" 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" 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" 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" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    										Popover on left
    									</button>

##### Dismiss on next click

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

#### Specific markup required for dismiss-on-next-click

For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, not the `<button>` tag, and you also must include a `tabindex` attribute.

Dismissible popover

    									<a tabindex="0" class="btn btn-lg btn-danger" 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>

    									$('.popover-dismiss').popover({
    									trigger: 'focus'
    								})