Popovers

Basic Example #

A basic popover with title and content.

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="popover"
    title="Popover title"
    data-bs-content="And here&#x27;s some amazing content. It&#x27;s very engaging. Right?"
>
    Click to toggle popover
</button>

Four directions #

Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.

<div class="row g-3">
    <div class="col-auto">
        <button
            type="button"
            class="btn btn-secondary"
            data-bs-container="body"
            data-bs-toggle="popover"
            data-bs-placement="left"
            data-bs-content="Left popover"
        >
            Popover on left
        </button>
    </div>
    <div class="col-auto">
        <button
            type="button"
            class="btn btn-secondary"
            data-bs-container="body"
            data-bs-toggle="popover"
            data-bs-placement="top"
            data-bs-content="Top popover"
        >
            Popover on top
        </button>
    </div>
    <div class="col-auto">
        <button
            type="button"
            class="btn btn-secondary"
            data-bs-container="body"
            data-bs-toggle="popover"
            data-bs-placement="bottom"
            data-bs-content="Bottom popover"
        >
            Popover on bottom
        </button>
    </div>
    <div class="col-auto">
        <button
            type="button"
            class="btn btn-secondary"
            data-bs-container="body"
            data-bs-toggle="popover"
            data-bs-placement="right"
            data-bs-content="Right popover"
        >
            Popover on right
        </button>
    </div>
</div>

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.

<a
    tabindex="0"
    class="btn btn-primary"
    role="button"
    data-bs-toggle="popover"
    data-bs-trigger="focus"
    title="Dismissible popover"
    data-bs-content="And here&#x27;s some amazing content. It&#x27;s very engaging. Right?"
    >Dismissible popover</a
>

Disabled elements #

Elements with the disabled attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper <div> or <span> , ideally made keyboard-focusable using tabindex="0" .

For 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.

<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
>