Bootstrap 5 Tooltips getInstance() Method

Last Updated : 28 Feb, 2023

Bootstrap Tooltips getInstance() Method is used to obtain the instance of tooltips while the tooltips are being used. This method can only work after the instance is pre-initialized. The tooltip instance linked to a DOM element may be obtained using this static function.

Syntax:

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

Example 1: The code example below demonstrates how to implement the getInstance() method using JavaScript on Tooltips on top and right.

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 getInstance() Method 
    </h4> 
    <div class="container mt-4 p-4"> 
        <button type="button"
                class="btn btn-success ms-5 me-5" 
                id="t-tooltip" 
                data-bs-placement="top"
                title="This is a Tooltip on Top"> 
            Top Tooltip 
        </button> 
        <button type="button" 
                class="btn btn-success ms-5 me-5" 
                id="r-tooltip" 
                data-bs-placement="right"
                title="This is a Tooltip on Right"> 
            Right Tooltip 
        </button> 
    </div> 
    <div class="container mt-4 p-2"> 
        <button type="button" 
                class="btn btn-danger" 
                id="instanceBtn_1"> 
            Get Instance of top Tooltip 
        </button> 
        <button type="button" 
                class="btn btn-danger ms-1" 
                id="instanceBtn_2"> 
            Get Instance of right 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("t-tooltip"); 
            var element_2 =  
                document.getElementById("r-tooltip"); 
  
            // Trigger the tooltip 
            var tooltip_1 =  
                new bootstrap.Tooltip(element_1); 
            var tooltip_2 =  
                new bootstrap.Tooltip(element_2); 
  
            // Get tooltip instance on button click 
            btn_1.addEventListener("click", function () { 
                var tooltipInstance_1 =  
                    bootstrap.Tooltip.getInstance(element_1); 
                console.log(tooltipInstance_1); 
            }); 
            
            // Get tooltip instance on button click 
            btn_2.addEventListener("click", function () { 
                var tooltipInstance_2 =  
                    bootstrap.Tooltip.getInstance(element_2); 
                console.log(tooltipInstance_2); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The code example below demonstrates how to implement the getInstance() method using JQuery on Tooltips with anchor tags on the bottom and left.

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 getInstance() Method 
      </h4> 
    <div class="container mt-4 p-4"> 
        <a href= 
"https://www.geeksforgeeks.org/" 
           id="b-tooltip"
           data-bs-placement="bottom"
           title="This is the Bottom placed tooltip"> 
                 Hover to open Bottom Tooltip 
        </a> 
        <a href= 
"https://www.geeksforgeeks.org/" 
           class="ms-5" 
           id="l-tooltip"
           data-bs-placement="left"
           title="This is the Left placed tooltip"> 
                 Hover to open Left Tooltip 
        </a> 
    </div> 
    <div class="container mt-4 p-2"> 
        <button type="button" 
                class="btn btn-danger" 
                id="instanceBtn_1"> 
            Get Instance of Bottom Tooltip 
        </button> 
        <button type="button" 
                class="btn btn-danger ms-4" 
                id="instanceBtn_2"> 
            Get Instance of Left Tooltip 
        </button> 
    </div> 
    <script> 
        $(document).ready(function () { 
            
            // Trigger the first tooltip 
            $("#b-tooltip").tooltip(); 
            
            // Trigger the second tooltip 
            $("#l-tooltip").tooltip(); 
  
            // Get first tooltip instance on button click 
            $("#instanceBtn_1").click(function () { 
                var tooltip_1 = bootstrap. 
                    Tooltip.getInstance($("#b-tooltip")[0]); 
                    console.log(tooltip_1); 
            }); 
            
            // Get second tooltip instance on button click 
            $("#instanceBtn_2").click(function () { 
                var tooltip_2 = bootstrap. 
                    Tooltip.getInstance($("#l-tooltip")[0]); 
                    console.log(tooltip_2); 
            }); 
        }); 
    </script> 
</body> 
  
</html>