Popover Tooltips

Tooltips


<button type="button" class="btn btn-primary text-white fw-semibold py-2 px-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
    Tooltip on top
</button>
<button type="button" class="btn btn-primary text-white fw-semibold py-2 px-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
    Tooltip on right
</button>
<button type="button" class="btn btn-primary text-white fw-semibold py-2 px-3" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
    Tooltip on bottom
</button>
<button type="button" class="btn btn-primary text-white fw-semibold py-2 px-3" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
    Tooltip on left
</button>

Custom tooltip


<div class="tab-pane fade show active" id="preview2-tab-pane" role="tabpanel" aria-labelledby="preview2-tab" tabindex="0">
    <button type="button" class="btn btn-primary py-2 px-3 text-white"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
        Custom tooltip
    </button>
</div>

Four directions


<button type="button" class="btn btn-primary text-white fw-semibold py-2 px-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
    Popover on top
</button>
<button type="button" class="btn btn-primary text-white fw-semibold py-2 px-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
    Popover on right
</button>
<button type="button" class="btn btn-primary text-white fw-semibold py-2 px-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
    Popover on bottom
</button>
<button type="button" class="btn btn-primary text-white fw-semibold py-2 px-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
    Popover on left
</button>

Dismiss on next click


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