<div class="d-flex flex-wrap gap-2">
    <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" 
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top
    </button>
    <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" 
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right
    </button>
    <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" 
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom
    </button>
    <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" 
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on left
    </button>
    <a tabindex="0" class="btn  btn-success" 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>
</div>

<div class="d-flex flex-wrap gap-2">
    <button type="button" class="btn btn-light" data-bs-container="body" 
    data-bs-toggle="popover" data-bs-placement="top" 
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top
    </button>
    <button type="button" class="btn btn-light" data-bs-container="body" 
    data-bs-toggle="popover" data-bs-placement="right" 
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right
    </button>
    <button type="button" class="btn btn-light" data-bs-container="body" 
    data-bs-toggle="popover" data-bs-placement="bottom" 
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom
    </button>
    <button type="button" class="btn btn-light" data-bs-container="body" 
    data-bs-toggle="popover" data-bs-placement="left" 
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on left
    </button>

    <a tabindex="0" class="btn  btn-success" 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>
</div>