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 © 2022 DesignReset, All rights reserved.
Coded with