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>'
})
Class Reference Color
class="popover popover-header-[color]" primary | secondary | success | danger | warning | info

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>'
})
Class Reference Color
class="popover popover-[color]" primary | secondary | success | danger | warning | info