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 Documentationfor 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="Vivamussagittis 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>'})