Popovers

Popover are similar to tooltip which looks like those found in iOS. You can add popover to any element on your site.

• Popovers requires Popper.js for positioning. Include popper.min.js before bootstrap.js or just use bootstrap.bundle.min.js / bootstrap.bundle.jswhich contains Popper.js within it
• 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 <a>s to avoid this behavior.
• Popovers must be hidden before their corresponding elements have been removed from the DOM.

For any element that you need popover add the data-toggle="popover" attribute and your desired content in the data-content="" attribute. Then you need initialize all popovers on a page by their data-toggleattribute using $('[data-toggle="popover"]').popover().

By default popover will be shown on clicking the popover element. You can also trigger popover on hover using data-trigger="hover" or focus using data-trigger="focus" attributes. You can also trigger manually by data-trigger="manual" and you will need additional setup which you learn later in this chapter.

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

Example: Using the container option

Styles on a parent element will interfere with a popover, so you want to specify a custom container so that the popover's HTML appears within that element instead.

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

Four options are available to position popover on top, right, bottom, and left aligned.

If you want dismiss popovers on the user's next click of a different element than the toggle element(clicked anywhere outside of popover button) use the focus trigger. You can set it either using data-trigger="focus" attribute for a particular element or using popover options trigger: 'focus' during initialization.

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

Popovers will not work with the disabled attribute. As a workaround, you should trigger the popover on the wrapper element like <div> or <span> and override the pointer-events on the disabled element.

Enable popovers via JavaScript

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

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

$().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 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 (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) 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')

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