Bootstrap Popover

A Popover is similar to a tooltip, but it is larger and can contain substantially more content. Popovers typically consist of a small header/title and a body paragraph. They are great for displaying secondary, contextual information without forcing the user to navigate away.

Initialization Required

Just like Tooltips, Popovers are strictly opt-in for performance reasons. They heavily rely on the third-party library Popper.js for absolute positioning. You must initialize them using JavaScript before they appear on your page.

<script>
    // Wait until the DOM is fully loaded
    document.addEventListener("DOMContentLoaded", function() {
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl);
        });
    });
</script>

Basic Popover

To create a popover, you need three key data attributes on your element:

• data-bs-toggle="popover": Tells Bootstrap this is a popover trigger.
• title="...": Provides the bold header text for the popover box.
• data-bs-content="...": Provides the actual body text that lives inside the popover.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
    Click to toggle popover
</button>

Popover Placement

You can specify the specific direction the popover will spawn from the triggering element using the data-bs-placement attribute. The four standard options are top, right, bottom, and left.

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

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

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

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

Dismiss on Next Click

By default, if you click a popover toggle, it spawns. If you click it again, it dismisses. However, it's often more user-friendly to make the popover dismiss when the user clicks anywhere else on the screen.

Use the data-bs-trigger="focus" attribute to automatically close the popover upon the user's next click elsewhere. For cross-browser consistency with the focus trigger, you must use an <a> tag with tabindex="0" instead of a standard <button> tag.

<!-- Use an <a> tag, add tabindex="0" and data-bs-trigger="focus" -->
<a tabindex="0" class="btn btn-warning" 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
</a>