1. Components
2. UI Elements
3. Popovers

Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Read the Official Bootstrap Documentation for a full list of instructions and other options.

---

Four Directions

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

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

$('[data-toggle="popover"]').popover();

---

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.

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

---

Colored Header

A custom style variant to create a colored title background of popover available in all four directions.

$('.btn-primary').popover({
  template: '<div class="popover popover-header-primary" role="tooltip">
              <div class="arrow"></div>
              <h3 class="popover-header"></h3>
              <div class="popover-body"></div>
            </div>'
})

---

Full Background Color

A custom style variant to create a full colored background to header and body of popover. Available in all four directions.

$('.btn-primary').popover({
  template: '<div class="popover popover-primary" role="tooltip">
              <div class="arrow"></div>
              <h3 class="popover-header"></h3>
              <div class="popover-body"></div>
            </div>'
})