<div class="btn-list">
    <a tabindex="0" class="btn btn-outline-primary btn-wave" role="button"
        data-bs-toggle="popover" data-bs-placement="top" title="Popover Top"
        data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover
        Top
    </a>
    <a tabindex="0" class="btn btn-outline-primary btn-wave" role="button"
        data-bs-toggle="popover" data-bs-placement="right" title="Popover Right"
        data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover
        Right</a>
    <a tabindex="0" class="btn btn-outline-primary btn-wave" role="button"
        data-bs-toggle="popover" data-bs-placement="bottom" title="Popover Bottom"
        data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover
        Bottom</a>
    <a tabindex="0" class="btn btn-outline-primary btn-wave" role="button"
        data-bs-toggle="popover" data-bs-placement="left" title="Popover Left"
        data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover
        Left</a>
</div>

<div class="btn-list">
    <button type="button" class="btn btn-outline-primary btn-wave" data-bs-toggle="popover"
        data-bs-placement="top" data-bs-custom-class="header-primary"
        title="Color Header" data-bs-content="Popover with primary header.">
        Header Primary
    </button>
    <button type="button" class="btn btn-outline-secondary btn-wave"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="header-secondary" title="Color Header"
        data-bs-content="Popover with secondary header.">
        Header Secondary
    </button>
    <button type="button" class="btn btn-outline-info btn-wave" data-bs-toggle="popover"
        data-bs-placement="bottom" data-bs-custom-class="header-info"
        title="Color Header" data-bs-content="Popover with info header.">
        Header Info
    </button>
    <button type="button" class="btn btn-outline-warning btn-wave" data-bs-toggle="popover"
        data-bs-placement="left" data-bs-custom-class="header-warning"
        title="Color Header" data-bs-content="Popover with warning header.">
        Header Warning
    </button>
    <button type="button" class="btn btn-outline-success btn-wave" data-bs-toggle="popover"
        data-bs-placement="top" data-bs-custom-class="header-success"
        title="Color Header" data-bs-content="Popover with success header.">
        Header Success
    </button>
    <button type="button" class="btn btn-outline-danger btn-wave" data-bs-toggle="popover"
        data-bs-placement="top" data-bs-custom-class="header-danger"
        title="Color Header" data-bs-content="Popover with danger header.">
        Header Danger
    </button>
</div>

<div class="btn-list">
    <button type="button" class="btn btn-primary btn-wave" data-bs-toggle="popover"
        data-bs-placement="top" data-bs-custom-class="popover-primary"
        title="Color Background" data-bs-content="Popover with primary background.">
        Primary
    </button>
    <button type="button" class="btn btn-secondary btn-wave"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="popover-secondary" title="Color Background"
        data-bs-content="Popover with secondary background.">
        Secondary
    </button>
    <button type="button" class="btn btn-info btn-wave" data-bs-toggle="popover"
        data-bs-placement="bottom" data-bs-custom-class="popover-info"
        title="Color Background" data-bs-content="Popover with info background.">
        Info
    </button>
    <button type="button" class="btn btn-warning btn-wave" data-bs-toggle="popover"
        data-bs-placement="left" data-bs-custom-class="popover-warning"
        title="Color Background" data-bs-content="Popover with warning background.">
        Warning
    </button>
    <button type="button" class="btn btn-success btn-wave" data-bs-toggle="popover"
        data-bs-placement="top" data-bs-custom-class="popover-success"
        title="Color Background" data-bs-content="Popover with success background.">
        Success
    </button>
    <button type="button" class="btn btn-danger btn-wave" data-bs-toggle="popover"
        data-bs-placement="right" data-bs-custom-class="popover-danger"
        title="Color Background" data-bs-content="Popover with danger background.">
        Danger
    </button>
    <button type="button" class="btn btn-teal btn-wave" data-bs-toggle="popover"
        data-bs-placement="bottom" data-bs-custom-class="popover-teal"
        title="Color Background" data-bs-content="Popover with teal background.">
        Teal
    </button>
    <button type="button" class="btn btn-purple btn-wave" data-bs-toggle="popover"
        data-bs-placement="left" data-bs-custom-class="popover-purple"
        title="Color Background" data-bs-content="Popover with purple background.">
        Purple
    </button>
</div>

<div class="btn-list">
    <button type="button" class="btn btn-primary-light btn-wave" data-bs-toggle="popover"
        data-bs-placement="top" data-bs-custom-class="popover-primary-light"
        title="Light Background" data-bs-content="Popover with light primary background.">
        Primary
    </button>
    <button type="button" class="btn btn-secondary-light btn-wave"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="popover-secondary-light" title="Light Background"
        data-bs-content="Popover with light secondary background.">
        Secondary
    </button>
    <button type="button" class="btn btn-info-light btn-wave" data-bs-toggle="popover"
        data-bs-placement="bottom" data-bs-custom-class="popover-info-light"
        title="Light Background" data-bs-content="Popover with light info background.">
        Info
    </button>
    <button type="button" class="btn btn-warning-light btn-wave" data-bs-toggle="popover"
        data-bs-placement="left" data-bs-custom-class="popover-warning-light"
        title="Light Background" data-bs-content="Popover with light warning background.">
        Warning
    </button>
    <button type="button" class="btn btn-success-light btn-wave" data-bs-toggle="popover"
        data-bs-placement="top" data-bs-custom-class="popover-success-light"
        title="Light Background" data-bs-content="Popover with light success background.">
        Success
    </button>
    <button type="button" class="btn btn-danger-light btn-wave" data-bs-toggle="popover"
        data-bs-placement="right" data-bs-custom-class="popover-danger-light"
        title="Light Background" data-bs-content="Popover with light danger background.">
        Danger
    </button>
    <button type="button" class="btn btn-teal-light btn-wave" data-bs-toggle="popover"
        data-bs-placement="bottom" data-bs-custom-class="popover-teal-light"
        title="Light Background" data-bs-content="Popover with light teal background.">
        Teal
    </button>
    <button type="button" class="btn btn-purple-light btn-wave" data-bs-toggle="popover"
        data-bs-placement="left" data-bs-custom-class="popover-purple-light"
        title="Light Background" data-bs-content="Popover with light purple background.">
        Purple
    </button>
</div>

<a tabindex="0" class="btn btn-primary m-1" role="button"
    data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" title="Dismissible popover"
    data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover Dismiss
</a>
<a tabindex="0" class="btn btn-secondary m-1" role="button"
data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="Dismissible popover"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover Dismiss
</a>
<a tabindex="0" class="btn btn-info m-1" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="bottom" title="Dismissible popover"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover Dismiss
</a>
<a tabindex="0" class="btn btn-warning m-1" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="left" title="Dismissible popover"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover Dismiss
</a>

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover"
    data-bs-trigger="hover focus" data-bs-content="Disabled popover">
    <button class="btn btn-primary" type="button" disabled>Disabled
        button</button>
    </span>

<a class="me-4 svg-primary" href="javascript:void(0)" data-bs-toggle="popover"
    data-bs-placement="top" data-bs-custom-class="popover-primary only-body" data-bs-content="This popover is used to provide details about this icon.">
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
</a>
<a class="me-4 svg-secondary" href="javascript:void(0)" data-bs-toggle="popover"
    data-bs-placement="left" data-bs-custom-class="popover-secondary only-body" data-bs-content="This popover is used to provide information about this icon.">
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
</a>