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"
});

Copyright © 2024 DesignReset, All rights reserved.

Coded with