<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>
<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>
<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>
<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><a tabindex="0"
class="btn btn-lg btn-danger" 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><button type="button" class="btn btn-secondary"
data-bs-toggle="popover" data-bs-placement="right"
data-bs-custom-class="custom-popover"
data-bs-title="Custom popover"
data-bs-content="This popover is themed via CSS variables.">
Custom popover
</button>