Popovers

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

Table of Contents

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",
                    });