Bootstrap 5 Popovers Methods
Last Updated :
07 May, 2024
Bootstrap 5 Popovers methods enable manual control over the visibility of popover elements, allowing users to show or hide them as needed, enhancing interactivity and customization options within web applications.
Bootstrap 5 Popovers Methods:
| Method | Description |
|---|
| toggle | Toggles the visibility of a popover element. |
| show | Shows a popover element. |
| hide | Hides a popover element. |
| dispose | Disposes of a popover element. |
| enable | Enables a popover element to be visible. |
| disable | Disables a popover element from being visible. |
| toggleEnabled | Toggles a popover element’s ability to be visible. |
| update | Updates the position of a popover element. |
| getInstance | Static method to get the popover element associated with the DOM. |
| getOrCreateInstance | Static method to get the popover element associated with the DOM, or create a new one if it doesn’t exist. |
Syntax:
myPopover.popover_method()
Let us understand more about this using some examples below:
Example 1: In this example, we will show and hide the popover element using the “show” and “hide” methods given by the Bootstrap 5 Popover object.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<h1 >
Bootstrap 5 Popover object
</h1>
<button type="button"
id="example"
data-bs-content="Top popover"
data-bs-placement="bottom">
Popover element
</button>
<button type="button" id="showButton">
Show popover
</button>
<button type="button" id="hideButton">
Hide popover
</button>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script>
const exampleEl = document.getElementById('example');
const popover = new bootstrap.Popover(exampleEl);
const showButton = document.getElementById('showButton');
const hideButton = document.getElementById('hideButton');
showButton.addEventListener('click', () => {
popover.show();
});
hideButton.addEventListener('click', () => {
popover.hide();
});
</script>
</body>
</html>
Output:
Bootstrap 5 Popovers Methods Example Output
Example 2: In this example, we will toggle and dispose of the popover element using the “toggle” and “dispose” methods given by the Bootstrap 5 Popover object. Once we dispose of a popover element, we cannot use any methods given by the Bootstrap 5 Popover object as it gets destroyed in the DOM.Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<h1>
Bootstrap 5 Popovers
</h1>
<button type="button"
id="example"
data-bs-content="Top popover"
data-bs-placement="bottom">
Popover element
</button>
<button type="button" id="toggleButton">
Toggle popover
</button>
<button type="button" id="disposeButton">
Dispose popover
</button>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const exampleEl = document.getElementById('example');
const popover = new bootstrap.Popover(exampleEl);
const toggleButton = document.getElementById('toggleButton');
const disposeButton = document.getElementById('disposeButton');
toggleButton.addEventListener('click', () => {
popover.toggle();
});
disposeButton.addEventListener('click', () => {
popover.dispose();
});
});
</script>
</body>
</html>
Output:
Bootstrap 5 Popovers Methods Example Output
Share your thoughts in the comments
Please Login to comment...