<!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=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Bootstrap 5 popover dispose() method</h3>
<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>
<button type="button" id="disposeButton">
dispose popover
</button>
<script>
// get popover element
const exampleEl = document.getElementById('example')
// Popover constructor to access the methods
const popover = new bootstrap.Popover(exampleEl)
// get the buttons that call the popover methods
const showButton = document.getElementById('showButton')
const hideButton = document.getElementById('hideButton')
const disposeButton = document.getElementById('disposeButton')
showButton.addEventListener('click', () => {
// show the popover element
popover.show()
})
hideButton.addEventListener('click', () => {
// hide the popover element
popover.hide()
})
disposeButton.addEventListener('click', () => {
// dispose the popover element
popover.dispose()
})
</script>
</body>
</html>