Bootstrap 5 Popovers getOrCreateInstance() Method
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.
HTML
<!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" > w3wiki </ 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.
HTML
<!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" > w3wiki </ 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
Contact Us