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