Bootstrap 5 Tooltips getInstance() Method

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>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#getinstance

Bootstrap 5 Tooltips getInstance() Method

Explore