Popover

Add Bootstrap popovers to any element via JavaScript. Popovers must be initialized and display a title plus content, unlike tooltips.

Basic Popover

							<!-- Initialize popovers -->
<script>
const popovers = document.querySelectorAll('[data-bs-toggle="popover"]');
popovers.forEach(el => new bootstrap.Popover(el));
</script>

<button data-bs-toggle="popover"
  data-bs-title="Popover title"
  data-bs-content="Popover content">
  Click me
</button>

Popover Placement

							<button data-bs-toggle="popover"
  data-bs-placement="top"
  data-bs-title="Top"
  data-bs-content="...">Top</button>

<button data-bs-toggle="popover"
  data-bs-placement="right"
  data-bs-title="Right"
  data-bs-content="...">Right</button>

<button data-bs-toggle="popover"
  data-bs-placement="bottom"
  data-bs-title="Bottom"
  data-bs-content="...">Bottom</button>

<button data-bs-toggle="popover"
  data-bs-placement="left"
  data-bs-title="Left"
  data-bs-content="...">Left</button>

Dismiss on Next Click

							<a tabindex="0" class="btn btn-danger" role="button"
  data-bs-toggle="popover"
  data-bs-trigger="focus"
  data-bs-title="Dismissible"
  data-bs-content="Click anywhere else to dismiss.">
  Dismissible popover
</a>

Hover Trigger

							<button data-bs-toggle="popover"
  data-bs-trigger="hover"
  data-bs-title="Hover popover"
  data-bs-content="Shows on hover.">
  Hover me
</button>

Popover Options Reference

Option Type Default Description
data-bs-title string "" Popover title
data-bs-content string "" Popover content
data-bs-placement string "top" top | bottom | left | right | auto
data-bs-trigger string "click" click | hover | focus | manual
data-bs-html boolean false Allow HTML in content
data-bs-delay number 0 Delay showing/hiding (ms)