Cirrus

Overview

Things to know when using the popover plugin:

• Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js](https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js) before cirrus.js or use `cirrus.bundle.min.js` / `cirrus.bundle.js` which contains Popper.js in order for popovers to work!
• Popovers require the [tooltip plugin](/docs/4.5/components/tooltips/) as a dependency.
• If you're building our JavaScript from source, it [requires `util.js`](/docs/4.5/getting-started/javascript/#util).
• Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
• Zero-length `title` and `content` values 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 `.disabled` or `disabled` elements 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-nowrap` on your ``s to avoid this behavior.
• Popovers must be hidden before their corresponding elements have been removed from the DOM.
• Popovers can be triggered thanks to an element inside a shadow 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-toggle` attribute:

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

Example: Using the `container` option

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

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

Example

<button type="button" class="btn btn-secondary" data-toggle="popover" title="Popover title" data-trigger="focus" data-content="This is some copy telling people what they need to do or what’s wrong or anything we want">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-trigger="focus" data-placement="top" data-content="This is some copy telling people what they need to do or what’s wrong or anything we want">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="This is some copy telling people what they need to do or what’s wrong or anything we want">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-content="This is some copy telling people what they need to do or what’s wrong or anything we want">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="This is some copy telling people what they need to do or what’s wrong or anything we want">
  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.

<a tabindex="0" class="btn btn-lg btn-secondary" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="This is some copy telling people what they need to do or what’s wrong or anything we want">Dismissible popover</a>

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

Disabled elements

Elements with the `disabled` attribute 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-events` on 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)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

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** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both 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** (i.e. before the `hidden.bs.popover` event 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** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event 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 `selector` option](#options)) 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...
})