<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
h1
class
=
"m-4 text-success"
>
GeeksforGeeks
</
h1
>
<
h4
class
=
"ms-4"
>
Bootstrap 5 Popovers getOrCreateInstance() method
</
h4
>
<
div
class
=
"container mt-4 p-4"
>
<
button
type
=
"button"
class
=
"btn btn-success w-25"
id
=
"topPop"
data-bs-container
=
"body"
data-bs-toggle
=
"popover"
data-bs-placement
=
"top"
data-bs-content
=
"This is a popover placed at the top."
>
Top Popover
</
button
>
<
button
type
=
"button"
class
=
"btn btn-success ms-3 w-25"
id
=
"rightPop"
data-bs-container
=
"body"
data-bs-toggle
=
"popover"
data-bs-placement
=
"right"
data-bs-content
=
"This is a popover placed at the right."
>
Right Popover
</
button
>
</
div
>
<
div
class
=
"container p-4 d-flex flex-column"
>
<
button
type
=
"button"
class
=
"btn btn-secondary w-50 ms-2"
id
=
"getCreateBtn_1"
>
Get or Create an Instance top Popover
</
button
>
<
button
type
=
"button"
class
=
"btn btn-secondary ms-2 mt-3 w-50"
id
=
"getCreateBtn_2"
>
Get or Create an Instance right Popover
</
button
>
</
div
>
<
script
>
document.addEventListener("DOMContentLoaded", function () {
var popoverElement_1 =
document.getElementById("topPop");
var popoverElement_2 =
document.getElementById("rightPop");
// Create the first popover instance
var popover_1 =
new bootstrap.Popover(popoverElement_1);
var btn_1 =
document.getElementById("getCreateBtn_1");
btn_1.addEventListener("click", function () {
var popoverInstance_1 =
bootstrap.Popover.getOrCreateInstance(popoverElement_1);
console.log(popoverInstance_1);
});
var btn_2 =
document.getElementById("getCreateBtn_2");
btn_2.addEventListener("click", function () {
var popoverInstance_2 =
bootstrap.Popover.getOrCreateInstance(popoverElement_2);
console.log(popoverInstance_2);
});
});
</
script
>
</
body
>
</
html
>