Bootstrap 5 Tooltips getInstance() Method

Last Updated : 31 Jul, 2024

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/[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 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/[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 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 getOrCreateInstance() Method

priyanshuchatterjee01

Improve

Article Tags :

Bootstrap 5 Tooltips getInstance() Method

Similar Reads