#### 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-bs-toggle="popover"
                        data-bs-title="Popover title"
                        data-bs-content="And here's some amazing content. It's very engaging. Right?"
                      >
                        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-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="top"
                        data-bs-content="Top popover"
                      >
                        Popover on top
                      </button>
                      <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="right"
                        data-bs-content="Right popover"
                      >
                        Popover on right
                      </button>
                      <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="bottom"
                        data-bs-content="Bottom popover"
                      >
                        Popover on bottom
                      </button>
                      <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="left"
                        data-bs-content="Left popover"
                      >
                        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-bs-toggle="popover"
                        data-bs-trigger="focus"
                        data-bs-title="Dismissible popover"
                        data-bs-content="And here's some amazing content. It's very engaging. Right?"
                        >Dismissible popover</a
                      >

                        const popover = new bootstrap.Popover(".popover-dismiss", {
                          trigger: "focus",
                        });