Finder v2.0.0
Buy now
Bootstrap docs

Popovers

A pop-up box that appears when the user clicks/hovers on an element.

Static examples

Live demo

<!-- Popover on top -->
<button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Top popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Popover on top
</button>

<!-- Popover on right -->
<button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover" title="Right popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Popover on right
</button>

<!-- Popover on bottom -->
<button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover" title="Bottom popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Popover on bottom
</button>

<!-- Popover on left -->
<button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-trigger="hover" title="Left popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Popover on left
</button>

Toggle options

Toggle popover on focus 
<!-- Toggle popover on click (click is default trigger) -->
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Popover on click" data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Toggle popover on click
</button>

<!-- Toggle popover on hover -->
<button type="button" class="btn btn-outline-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Popover on hover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Toggle popover on hover
</button>

<!-- Toggle popover on focus -->
<a class="btn btn-outline-secondary" href="#!" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Popover on focus" data-bs-content="And here's some amazing content. It's very engaging. Right?" tabindex="1">
  Toggle popover on focus
</a>
Top