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 =
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 >
|
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 =
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 = "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(){
var popover_1 =
bootstrap.Popover.getOrCreateInstance($("#bottomPop"));
console.log(popover_1);
});
// Get or create popover instance on button click
$("#getCreateBtn_2").click(function(){
var popover_2 =
bootstrap.Popover.getOrCreateInstance($("#topPop"));
console.log(popover_2);
});
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#getorcreateinstance