#### Popover

Link

    <a class="btn btn-primary rounded bs-popover  mb-2 me-4" data-bs-container="body" data-bs-content="Tooltip using ANCHOR tag">
        Link
    </a>
    <button type="button" class="btn btn-success rounded bs-popover mb-2" data-bs-container="body" data-bs-content="Tooltip using BUTTON tag">
        Button
    </button>

#### Placement

`data-placement="top"`

`data-bs-placement="right"`

`data-bs-placement="bottom"`

`data-bs-placement="left"`

    <!-- TOP -->
    <button type="button" class="btn btn-info mr-2 rounded bs-popover mb-4 ml-2" data-bs-container="body" data-bs-placement="top" data-bs-content="Tooltip on top">
        Popover on top
    </button>

    <!-- RIGHT -->
    <button type="button" class="btn btn-danger mr-2 rounded bs-popover mb-4 ml-2" data-bs-container="body" data-bs-placement="right" data-bs-content="Tooltip on right">
        Popover on right
    </button>

    <!-- BOTTOM -->
    <button type="button" class="btn btn-warning mr-2 rounded bs-popover mb-4 ml-2" data-bs-container="body" data-bs-placement="bottom" data-bs-content="Tooltip on bottom">
        Popover on bottom
    </button>

    <!-- LEFT -->
    <button type="button" class="btn btn-secondary mr-2 rounded bs-popover mb-4 ml-2" data-bs-container="body" data-bs-placement="left" data-bs-content="Tooltip on left">
        Popover on left
    </button>

#### Dismissible popover

Popover on left

    <a tabindex="0" class="btn btn-dark rounded bs-popover mb-3" data-bs-container="body" data-bs-trigger="focus" data-bs-placement="left" data-bs-content="Lorem ipsum dolor sit.">
        Popover on left
    </a>

#### Options

`data-bs-trigger="hover"`

`Default`

`data-bs-delay="1000"`

`data-bs-animation="false"`

    <!-- On Hover -->
    <button type="button" class="btn btn-button-2 bs-popover rounded" data-bs-container="body" data-bs-trigger="hover" data-bs-content="On Hover">
        On Hover
    </button>

    <!-- On Focus -->
    <button type="button" class="btn btn-button-3 bs-popover rounded" data-bs-container="body" data-bs-content="On Focus">
        On Focus
    </button>

    <!-- Delay -->
    <button type="button" class="btn btn-button-4 bs-popover rounded" data-bs-container="body" data-bs-delay="1000" data-bs-content="Delay 1s">
        Delay
    </button>

    <!-- Disabled Animation -->
    <button type="button" class="btn btn-button-5 bs-popover rounded" data-bs-container="body" data-bs-animation="false" data-bs-content="Disabled Animation">
        Disabled Animation
    </button>

#### Colors

Change popover template html as shown below to add color scheme.

    <!-- Primary -->
    <button type="button" class="btn btn-primary btn-popover-primary mb-2 rounded" data-bs-container="body" data-html="true" data-placement="top"> Primary </button>

    $('.btn-popover-primary').popover({
        template: '<div class="popover popover-primary" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
        title: "Primary",
        content: "Primary popover"
    });