Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Directions

Click on the buttons below to see the four popovers directions: top, right, bottom, and left.

<!-- Popover on right -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Popover on right
</button>

<!-- Popover on top -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Popover on top
</button>

<!-- Popover on bottom -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Popover on bottom
</button>
<!-- Popover on left -->

<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Popover on left
</button>

const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
const popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new Popover(popoverTriggerEl);
});

Attribute	Value
`data-bs-placement="{value}"`	top \| right \| bottom \| left

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.

Preview
HTML

<button type="button" tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>

Disabled Elements

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

Preview
HTML

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Solid PRO

Create popovers with with solid variant by using data-bs-custom-class="popover-{value}" attribute.

Preview
HTML

<!-- Primary -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-primary" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Primary
</button>
<!-- Secondary -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-secondary" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Secondary
</button>
<!-- Success -->
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-success" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Success
</button>
<!-- Danger -->
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-danger" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Danger
</button>
<!-- Warning -->
<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-placement="left" data-bs-custom-class="popover-warning" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Warning
</button>
<!-- Info -->
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-info" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Info
</button>
<!-- Dark -->
<button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-dark" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Dark
</button>

Attribute	Value
`data-bs-custom-class="popover-{value}"`	primary \| secondary \| success \| danger \| warning \| info \| dark