Popovers

Use popovers to indicate extra content for your users when clicking on an element

Popover example

Use the following popover markup to indicate extra content to your users when clicking on certain elements:

<button type="button" class="btn btn-secondary" 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>

Popover placement

By specifying data-bs-placement you can set the placement of the popover when it shows up.

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