Tutorial

Sign Up

log In

Bootstrap
Bootstrap 5 Popover

❮ Previous

Next ❯

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.