<!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
>