Bootstrap 5 Popovers getOrCreateInstance() Method Last Updated : 22 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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/[email protected]/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/[email protected]/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. HTML <!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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 Comment More infoAdvertise with us P priyanshuchatterjee01 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Similar Reads Bootstrap 5 Popovers Bootstrap 5 Popovers Provides directional placement options (top, bottom, left, right), dismiss on click, and support for disabled elements. Styled with Sass, they feature various methods, options, and events for dynamic interaction and customization. Bootstrap 5 Popovers: AspectDescriptionFour dire 2 min read Bootstrap 5 Popovers Four directions The popover is a bootstrap component used to mainly add additional information to a website. It is a pop-up box that appears when the user clicks on an element. Using bootstrap attributes, It can be aligned in any of the four directions left, top, right, and bottom. Bootstrap 5 Popovers Four directi 3 min read Bootstrap 5 Popovers Dismiss on next click The popover is an attribute of bootstrap used to make the website look more effective. Popovers are mainly used to display additional information and are displayed with the click of the mouse pointer on a button. Popovers can be dismissed on the user’s next click of a different element than the togg 2 min read Bootstrap 5 Popovers Disabled Elements Bootstrap 5 Popovers are an amazing way to show some quick information when hovered over a button or anchor or span tag. In popovers, there exists an option to disable the popover element. Disabling the element essentially means that the popover won't work anymore. The disabling is mainly done using 2 min read Bootstrap 5 Popovers SASS Bootstrap 5 Popovers SASS has a set of variables that are usually set to a default value but it can be changed accordingly to customize the Popover.SASS variable of Popovers: SASS variables and their default values:$popover-font-size ($font-size-sm): This variable is used to change the font size of 5 min read Bootstrap 5 Popovers Usage Bootstrap 5 popover is similar to the tooltips which have a pop-up box that appears when we click the element. We can insert the content into the popover box by using the attribute called "data-bs-content". We can also include interactive controls. Bootstrap 5 Popovers Usage Events: Options: Options 2 min read Bootstrap 5 Popovers Options Bootstrap 5 Popovers are small overlays that can be displayed on top of content to provide additional context or action options. Popover option are used to perform the specific function on the element. Options can be passed through the data attributes or java script. To pass the data attributes we S 3 min read Bootstrap 5 Popovers Using function with popperConfig Options Bootstrap 5 Popover is a feature of Bootstrap that allow you to display a small popup over the element when an element is clicked or hovered over. Bootstrap 5 Popovers Using function with popperConfig Options: Popover popperConfig option is used to customize the behavior of the popover. The popperCo 2 min read Bootstrap 5 Popovers Methods Bootstrap 5 Popovers methods enable manual control over the visibility of popover elements, allowing users to show or hide them as needed, enhancing interactivity and customization options within web applications.Bootstrap 5 Popovers Methods:MethodDescriptiontoggleToggles the visibility of a popover 2 min read Bootstrap 5 Popovers show() Method Bootstrap 5 Popovers show() method is used to open the popover manually. It will show the popover before the actual shown.bs.popover event occurs. Syntax: popover.show() Return value: This method will manually trigger the element’s popover to be displayed. Example 1: In this example, we will learn a 2 min read Like