Popovers

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

Overview

Things to know when using the popover plugin:

• Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js/ bootstrap.bundle.jswhich contains Popper.js in order for popovers to work!
• Popovers require the tooltip plugin as a dependency.
• If you're building our JavaScript from source, it requiresutil.js .
• Popovers are opt-in for performance reasons, so you must initialize them yourself .
• Zero-length titleand contentvalues ​​will never show a popover.
• Specify container: 'body'to avoid rendering problems in more complex components (like our input groups, button groups, etc).
• Triggering popovers on hidden elements will not work.
• Popovers for .disabledor disabledelements must be triggered on a wrapper element.
• When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use .text-nowrapon your <a>s to avoid this behavior.
• Popovers must be hidden before their corresponding elements have been removed from the DOM.

Keep reading to see how popovers work with some examples.

Example: Enable popovers everywhere

One way to initialize all popovers on a page would be to select them by their data-toggleattribute:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Example: Using the containeroptions

When you have some styles on a parent element that interferes with a popover, you'll want to specify a custom containerso that the popover's HTML appears within that element instead.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

example

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

Dismiss on next click

Use the focustrigger to dismiss popovers on the user's next click of a different element than the toggle element.

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

$('.popover-dismiss').popover({
  trigger: 'focus'
})

Disabled elements

Elements with the disabledattribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper <div>or <span>and override the pointer-eventson the disabled element.

For disabled popover triggers, you may also prefer data-trigger="hover"so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Usage

Enable popovers via JavaScript:

$('#example').popover(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an element's popover. Returns to the caller before the popover has actually been shown (ie before the shown.bs.popoverevent occurs). This is considered a “manual” triggering of the popover. Popovers whose both title and content are zero-length are never displayed.

$('#element').popover('show')

.popover('hide')

Hides an element's popover. Returns to the caller before the popover has actually been hidden (ie before the hidden.bs.popoverevent occurs). This is considered a “manual” triggering of the popover.

$('#element').popover('hide')

.popover('toggle')

Toggles an element's popover. Returns to the caller before the popover has actually been shown or hidden (ie before the shown.bs.popoveror hidden.bs.popoverevent occurs). This is considered a “manual” triggering of the popover.

$('#element').popover('toggle')

.popover('dispose')

Hides and destroys an element's popover. Popovers that use delegation (which are created using the selectoroption ) cannot be individually destroyed on descendant trigger elements.

$('#element').popover('dispose')

.popover('enable')

Gives an element's popover the ability to be shown. Popovers are enabled by default.

$('#element').popover('enable')

.popover('disable')

Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.

$('#element').popover('disable')

.popover('toggleEnabled')

Toggles the ability for an element's popover to be shown or hidden.

$('#element').popover('toggleEnabled')

.popover('update')

Updates the position of an element's popover.

$('#element').popover('update')

Events

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})