@themesberg/pixel-lite-bootstrap-ui-kit/src/partials/components/_popovers.html

Open-source Bootstrap 5 UI Kit

<!-- Section -->
<div class="section section-md">
    <div class="container">
        <!-- End of Title -->
        <div class="row mt-5">
            <div class="col-lg-12 d-block d-lg-flex justify-content-around">
                <button type="button" class="btn btn-secondary btn-sm mb-3" data-bs-container="body"
                    data-bs-toggle="popover" data-bs-placement="top" title="Popover on top"
                    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on top
                </button>

                <button type="button" class="btn btn-secondary btn-sm mb-3" data-bs-container="body"
                    data-bs-toggle="popover" data-bs-placement="left" title="Popover on left"
                    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on left
                </button>

                <button type="button" class="btn btn-secondary btn-sm mb-3" data-bs-container="body"
                    data-bs-toggle="popover" data-bs-placement="bottom" title="Popover on bottom"
                    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on bottom
                </button>

                <button type="button" class="btn btn-secondary btn-sm mb-3" data-bs-container="body"
                    data-bs-toggle="popover" data-bs-placement="right" title="Popover on right"
                    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on right
                </button>
            </div>
        </div>
    </div>
</div>
<!-- End of Section -->