Bootstrap 5 Popovers toggle() Method
Last Updated :
16 Jan, 2023
Bootstrap 5 Popovers toggle() method is used to toggle the visibility of the popover. The toggle() method can be used in place of the show() and hide() methods to change the visibility of the popover. The toggle() method returns to the caller before the popover is actually shown or hidden from the screen.
Syntax:
const element = new bootstrap.Popover.getOrCreateInstance("#popoverID");
element.toggle();
Parameters: The popover toggle method does not accept any parameters.
Return Value: This method does not return anything to the caller. It just toggles the popover of an element.
Example 1: In this example, we used the popover toggle method to toggle the visibility of the popover of an element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Popovers toggle() Method</title>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div class="mt-4">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Popovers toggle() Method</strong>
</div>
<button class="btn btn-danger my-4"
onclick="togglePopover()">
Toggle Popover
</button>
<div
class="card w-25"
id="gfg"
data-bs-toggle="popover"
data-bs-content="GeeksforGeeks is Awesome.">
<div class="card-body">
Click this card to show the
popover if it is enabled.
</div>
</div>
<script>
const el = document.getElementById('gfg');
const popOver = new bootstrap.Popover(el);
function togglePopover() {
popOver.toggle();
}
</script>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we used the toggle method of the popover with the show and the hide method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Popovers toggle() Method</title>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div class="mt-4">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Popovers toggle() Method</strong>
</div>
<button class="btn btn-warning my-3"
onclick="togglePopover()">
Toggle Popover
</button>
<button class="btn btn-success my-3"
onclick="showPopover()">
Show Popover
</button>
<button class="btn btn-danger my-3"
onclick="hidePopover()">
Hide Popover
</button>
<div
class="card w-25"
id="gfg"
data-bs-toggle="popover"
data-bs-content="GeeksforGeeks is Awesome.">
<div class="card-body">
Click this card to show the
popover if it is enabled.
</div>
</div>
<script>
const el = document.getElementById('gfg');
const popOver = new bootstrap.Popover(el);
function togglePopover() {
popOver.toggle();
}
function showPopover() {
popOver.show();
}
function hidePopover() {
popOver.hide();
}
</script>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#toggle
Share your thoughts in the comments
Please Login to comment...