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 tooltip plugin:

  • Popovers rely on the third-party library Popper for positioning.
  • Popovers with a zero-length <desc> element are never displayed.
  • Triggering popovers on hidden elements will not work.
  • Popovers for @outputclass="disabled" elements must be triggered on a wrapper element.
  • 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.
  • Popovers are include by default, but for performance reasons, you may exclude them yourself by setting --popovers.include=no

Examples

Keep reading to see how popovers work with some examples.

Click to toggle popover 
 <xref href="#" outputclass="btn-lg btn-danger popover-top">
  <data name="title">>Popover title</data>
  <desc>And here’s some amazing content. It’s very engaging. Right?</desc>
  Click to toggle popover
</xref>

Four directions

Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL. To enable popovers, add @output-class="popover-*" to the enclosing <xref>. The direction of the popover is appended to the @output-class.

Popover on top Popover on right Popover on bottom Popover on left 
<xref href="#" outputclass="btn-secondary popover-top">
  <desc>Top popover</desc>
  Popover on top
</xref>
<xref href="#" outputclass="btn-secondary popover-right">
  <desc>Right Popover</desc>
  Popover on right
</xref>
<xref href="#" outputclass="btn-secondary popover-bottom">
  <desc>Bottom popover</desc>
  Popover on bottom
</xref>
<xref href="#" outputclass="btn-secondary popover-left">
  <desc>Left popover</desc>
  Popover on left
</xref>

Custom popovers

You can customize the appearance of popovers using CSS variables. We set a custom class with <data name="class">custom-popover<data> to scope our custom appearance and use it to override some of the local CSS variables.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}
Custom popover 
<xref href="#" outputclass="btn-lg btn-danger popover-top">
  <data name="title">Popover title</data>
  <data name="class">custom-popover</data>
  <desc>And here’s some amazing content. It’s very engaging. Right?</desc>
  Custom popover
</xref>