Bootstrap 5 Popovers getOrCreateInstance() Method

Last Updated : 11 Apr, 2023

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"> 
          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.

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"> 
      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>