<!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
rel
=
"stylesheet"
href
=
<
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
toggleEnabled() Method
</
strong
>
</
div
>
<
button
class
=
"btn btn-danger my-4"
onclick
=
"toggleStateofPopover()"
>
toggleEnable
</
button
>
<
button
class
=
"btn btn-success my-4"
onclick
=
"enable()"
>
Enable
</
button
>
<
button
class
=
"btn btn-danger my-4"
onclick
=
"disable()"
>
Disable
</
button
>
<
div
class
=
"card w-25"
id
=
"popover1"
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
>
<
h5
class
=
"mt-4"
id
=
"state"
>Enabled</
h5
>
<
script
>
const el = document.getElementById('popover1');
const popOver = new bootstrap.Popover(el);
var state = document.getElementById('state');
function enable() {
if (state.innerText == "Disabled") {
popOver.enable();
state.innerText = "Enabled";
}
}
function disable() {
if (state.innerText == "Enabled") {
popOver.disable();
state.innerText = "Disabled";
}
}
function toggleStateofPopover() {
popOver.toggleEnabled();
if (state.innerText == "Enabled") {
state.innerText = "Disabled";
}
else {
state.innerText = "Enabled";
}
}
</
script
>
</
div
>
</
body
>
</
html
>