Bootstrap 5 Popovers getOrCreateInstance() method is used to obtain the instance of tooltips while the tooltips are being used. This method can work even when the instance is not pre-initialized and this method creates an instance if there isn't one available.
Syntax:
var popover-element =
document.getElementById("popover-id");
var popover-instance =
bootstrap.Tooltip.getOrCreateInstance(popover-element);
Parameters: This method accepts as an argument either an HTML element or its selector.
Return Value: This method returns the current Popover instance to the caller. If no instance is yet created, it creates one.
Example 1: This example demonstrates the basic implementation of the Popovers getOrCreateInstance() method using JavaScript and the top and right popovers.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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 () {
let popoverElement_1 =
document.getElementById("topPop");
let popoverElement_2 =
document.getElementById("rightPop");
// Create the first popover instance
let popover_1 =
new bootstrap.Popover(popoverElement_1);
let btn_1 =
document.getElementById("getCreateBtn_1");
btn_1.addEventListener("click", function () {
let popoverInstance_1 =
bootstrap.Popover.getOrCreateInstance(popoverElement_1);
console.log(popoverInstance_1);
});
let btn_2 =
document.getElementById("getCreateBtn_2");
btn_2.addEventListener("click", function () {
let popoverInstance_2 =
bootstrap.Popover.getOrCreateInstance(popoverElement_2);
console.log(popoverInstance_2);
});
});
</script>
</body>
</html>
Output:
Example 2: This example demonstrates the basic implementation of the Popovers getOrCreateInstance() method using jQuery and the bottom and top popovers.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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="bottomPop"
data-bs-container="body"
title="Popover title"
data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-content=
"This is a popover placed at the bottom.">
Bottom Popover
</button>
<button type="button"
class="btn btn-success ms-3 w-25"
id="topPop"
data-bs-container="body"
title="Popover title"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content=
"This is a popover placed at the top.">
Top 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 of Bottom 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).ready(function(){
// Get or create popover instance on button click
$("#getCreateBtn_1").click(function(){
let popover_1 =
bootstrap.Popover.getOrCreateInstance($("#bottomPop"));
console.log(popover_1);
});
// Get or create popover instance on button click
$("#getCreateBtn_2").click(function(){
let popover_2 =
bootstrap.Popover.getOrCreateInstance($("#topPop"));
console.log(popover_2);
});
});
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#getorcreateinstance