Advertisement
Google Ad Slot: content-top
Bootstrap 5 Popover
In Bootstrap 5, a popover is a small overlay element that appears when users interact with an element (usually on hover or click).
Basic Popover:
The data-bs-toggle="popover" attribute is used to trigger a popover. You must also include the title and data-bs-content attributes for the header and body of the popover.
Example
<button type="button" class="btn btn-secondary class1" data-bs-toggle="popover" title="Popover Title" data-bs-content="This is the content of the popover.">
Click me to toggle popover
</button>
<script>
document.addEventListener('DOMContentLoaded', function () {
const popoverTriggerList = [].slice.call(document.querySelectorAll('.class1'));
popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
});
</script>
Positioning Tooltips:
You can control the position of the popover using the data-bs-placement attribute. Options include top, right, bottom, left, or auto.
Example
<div style="display: flex;gap: 10px;justify-content: center;">
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" title="Top Popover" data-bs-content="This popover on top.">
Top
</button>
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="left" title="Left Popover" data-bs-content="This popover on left">
Left
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" title="Right Popover" data-bs-content="This popover on right.">
Right
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="bottom" title="Bottom Popover" data-bs-content="This popover on bottom.">
Bottom
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
});
</script>
Trigger Options:
Control how the popover is triggered using the data-bs-trigger attribute: click, hover, focus
Example
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-trigger="hover" title="Hover Trigger" data-bs-content="This popover shows on hover.">
Hover me
</button>
<script>
document.addEventListener('DOMContentLoaded', function () {
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
});
</script>
Dismiss on Click Outside:
To dismiss them when clicking outside
Example
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-trigger="focus" title="Click Trigger" data-bs-content="This popover shows on click.">
Click me
</button>
<script>
document.addEventListener('DOMContentLoaded', function () {
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
});
</script>