Bootstrap 5 popover is similar to the tooltips which have a pop-up box that appears when we click the element. We can insert the content into the popover box by using the attribute called “data-bs-content”. We can also include interactive controls.
Bootstrap 5 Popovers Usage Events:
- Options: Options can be passed as the data attribute in the element which performs a specified function. We can pass the data attributes by appending option names with the “data-bs-” like data-bs-animation=””.
- Methods: Methods are used to perform some tasks like the show, hide, toggle, dispose of, enable, disable, etc.
- Events: Bootstrap popover calls the event automatically when some method is called for example when the show method is called the bootstrap javascript automatically calls triggers show.bs.popover. We also have shown.bs.popover, hide.bs.popover, hidden.bs.popover events.
Example 1: In this example, we will demonstrate popover options.
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Popover Usage </strong>
<br>
<button type="button"
class="btn btn-primary" data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover"
data-bs-trigger="click">
Popover on top
</button>
</center>
<script type="text/javascript">
var popoverTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
|
Output :
Bootstrap 5 popovers usage
Example 2: In this example we will demonstrate popover methods like the show, hide and toggle.
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Popover Usage</strong>
<br>
<button class="btn btn-primary btn-lg" id="Popover" data-bs-toggle="popover" title="Popover title" data-bs-content="Bootstrap5 popover content">
Bootstrap5 popover
</button>
<div class="mt-3">
<button type="button" class="btn btn-primary" id="show">
Show
</button>
<button type="button" class="btn btn-warning" id="hide">
Hide
</button>
<button type="button" class="btn btn-success" id="toggle">
Toggle
</button>
</div>
</center>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#Popover").popover("show");
});
$("#hide").click(function(){
$("#Popover").popover("hide");
});
$("#toggle").click(function(){
$("#Popover").popover("toggle");
});
});
</script>
</body>
</html>
|
Output:
Bootstrap 5 popovers usage
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#usage