Bootstrap 5 Tooltips getOrCreateInstance() Method

Last Updated : 28 Feb, 2023

Bootstrap Tooltips 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 tooltip-element = 
    document.getElementById("tooltip-id");
var tooltip-instance = bootstrap.Tooltip
    .getOrCreateInstance(tooltip-element);

Parameters: This method accepts argument either an HTML element or its selector.

Return Value: This method returns the current Bootstrap 5 Tooltips instance to the caller. If no instance is yet created, it creates one.

Example 1: The code example below demonstrates how to implement the getOrCreateInstance() method using jQuery on Tooltips on the bottom and left. The bottom tooltip instance is pre-initialized and the other one gets initialized.

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 class="container text-center"> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4"> 
        Bootstrap 5 Tooltips getOrCreateInstance() Method 
    </h4> 
    <div class="container mt-4 p-4"> 
        <button type="button" 
                class="btn btn-success ms-5 me-5" 
                id="b-tooltip" 
                data-bs-placement="bottom"
                title="This is a Tooltip on Bottom"> 
            Bottom Tooltip 
        </button> 
        <button type="button" 
                class="btn btn-success ms-5 me-5" 
                id="l-tooltip" 
                data-bs-placement="left"
                title="This is a Tooltip on Left"> 
            Left Tooltip 
        </button> 
    </div> 
    <div class="container mt-4 p-2"> 
        <button type="button" 
                class="btn btn-danger" 
                id="instanceBtn_1"> 
            Get or create Instance of bottom Tooltip 
        </button> 
        <button type="button" 
                class="btn btn-danger ms-1" 
                id="instanceBtn_2"> 
            Get or create Instance of left Tooltip 
        </button> 
    </div> 
    <script> 
        document.addEventListener("DOMContentLoaded", 
            function () { 
                var btn_1 = 
                    document.getElementById("instanceBtn_1"); 
                var btn_2 = 
                    document.getElementById("instanceBtn_2"); 
                var element_1 = 
                    document.getElementById("b-tooltip"); 
                var element_2 = 
                    document.getElementById("l-tooltip"); 
  
                // Trigger the bottom tooltip only 
                var tooltip_1 = 
                    new bootstrap.Tooltip(element_1); 
  
                // Get or Create tooltip instance on button click 
                btn_1.addEventListener("click", function () { 
                    var tooltipInstance_1 = bootstrap 
                        .Tooltip.getOrCreateInstance(element_1); 
                    console.log(tooltipInstance_1); 
                }); 
  
                // Get or Create tooltip instance on button click 
                btn_2.addEventListener("click", function () { 
                    var tooltipInstance_2 = bootstrap 
                        .Tooltip.getOrCreateInstance(element_2); 
                    console.log(tooltipInstance_2); 
                }); 
            }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The code example below demonstrates how to implement the getOrCreateInstance() method using jQuery on Tooltips with anchor tags on the top and right. The top tooltips’ instance is pre-initialized and the other one gets initialized.

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 class="container text-center"> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="ms-4"> 
        Bootstrap 5 Tooltips 
        getOrCreateInstance() Method 
    </h4> 
    <div class="container mt-4 p-4"> 
        <a href="https://www.geeksforgeeks.org/" 
           id="t-tooltip" 
           data-bs-placement="top"
           title="This is the Top placed tooltip"> 
            Hover to open Top Tooltip 
        </a> 
        <a href="https://www.geeksforgeeks.org/" 
           class="ms-5" 
           id="r-tooltip" 
           data-bs-placement="right"
           title="This is the Right placed tooltip"> 
            Hover to open Right Tooltip 
        </a> 
    </div> 
    <div class="container mt-4 p-2"> 
        <button type="button" 
                class="btn btn-danger" 
                id="instanceBtn_1"> 
            Get or Create Instance of Top Tooltip 
        </button> 
        <button type="button" 
                class="btn btn-danger ms-4" 
                id="instanceBtn_2"> 
            Get or Create Instance of Right Tooltip 
        </button> 
    </div> 
  
    <script> 
        $(document).ready(function () { 
  
            // Get first tooltip instance on button click 
            $("#instanceBtn_1").click(function () { 
                var tooltip_1 = bootstrap. 
                    Tooltip.getOrCreateInstance($("#t-tooltip")[0]); 
                console.log(tooltip_1); 
            }); 
  
            // Get second tooltip instance on button click 
            $("#instanceBtn_2").click(function () { 
                var tooltip_2 = bootstrap. 
                    Tooltip.getOrCreateInstance($("#r-tooltip")[0]); 
                console.log(tooltip_2); 
            }); 
        }); 
    </script> 
</body> 
  
</html>