Open In App

Bootstrap 5 Tooltips Usage Methods

Last Updated : 23 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap 5 Tooltips facilitates some pre-defined methods that we can use to trigger different types of functionalities in tooltips. The methods can be implemented using JavaScript and JQuery.

Bootstrap 5 Tooltips Usage Methods: The Tooltips Methods with their function are given below:

  • show(): The show() method can be used to show an element’s tooltip. 
  • hide(): The hide() method can be utilized to show some extra information to the user when the user hovers over the element.
  • toggle(): The toggle() method is used to toggle show/hide hidden/shown Tooltips.
  • dispose(): This method will destroy a Tooltips element. (Deletes the DOM element's stored data)
  • enable(): The enable() method creates the ability for the Tooltips to be shown when hovered over.
  • disable(): The disabled() method abstains from the ability of the Tooltips to be shown when hovered over.
  • toggleEnabled():  The ability of the Tooltips to be shown or hidden is toggled by this method when hovered over.
  • update(): This method can be used to show some extra information to the user when the user hovers over the element or when the element with the tooltip is in focus.
  • getInstance(): This is a static method that can be used to obtain the Tooltips instance connected to a DOM element.
  • getOrCreateInstance(): It is a static method that either returns the relevant Tooltips element's instance or produces a new Tooltips instance if the one associated with the DOM element was not initialized. 

Example 1: This example demonstrates the usage of the toggle, dispose, and getInstance() methods using JavaScript. The getInstance() method is used to obtain the instance of the tooltip and toggle and dispose of it.

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 Usage() Methods
    </h4>
    <div class="container mt-4 p-4">
        <button type="button" 
                class="btn btn-primary 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-primary 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-success" 
                id="instanceTogBtn">
            Get Instance and toggle of bottom Tooltip
        </button>
        <button type="button" 
                class="btn btn-danger ms-1" 
                id="instanceDisBtn">
            Get Instance and dispose of left Tooltip
        </button>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded",function () {
            var btn_1 = 
                document.getElementById("instanceTogBtn");
            var btn_2 = 
                document.getElementById("instanceDisBtn");
            var element_1 = 
                document.getElementById("b-tooltip");
            var element_2 = 
                document.getElementById("l-tooltip");
        
            // Trigger instance of the two tooltips
            var tooltip_b = 
                new bootstrap.Tooltip(element_1);
            var tooltip_l = 
                new bootstrap.Tooltip(element_2);
        
            // Get First tooltip instance and toggle on button click
            btn_1.addEventListener("click", function () {
                var tooltipInstance_1 = 
                    bootstrap.Tooltip.getInstance(element_1);
                console.log(tooltipInstance_1);
                tooltipInstance_1.toggle();
            });
            
            // Get Second tooltip instance and dispose on button click
            btn_2.addEventListener("click", function () {
                var tooltipInstance_2 = 
                    bootstrap.Tooltip.getInstance(element_2);
                console.log(tooltipInstance_2);
                tooltipInstance_2.dispose();
                console.log(tooltipInstance_2);
            });
        });
    </script>
</body>

</html>

Output:

Example 2: The example demonstrates the usage of the show, hide, and getOrCreateInstance() methods using JavaScript.  The tooltips have no pre-initialized instance and it is created using the getOrCreateInstance() method and show and hide them.

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 Usage() Methods
    </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-primary" 
                id="showBtn">
            Get or Create Instance and show Tooltips
        </button>
        <button type="button" 
                class="btn btn-secondary ms-4" 
                id="hideBtn">
            Get or Create Instance and hide Tooltips
        </button>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded",function () {
            var btn_1 = 
                document.getElementById("showBtn");
            var btn_2 = 
                document.getElementById("hideBtn");
            var element_1 = 
                document.getElementById("t-tooltip");
            var element_2 = 
                document.getElementById("r-tooltip");
        
            // Create instances and show tooltips on button click
            btn_1.addEventListener("click", function () {
                var tooltipInstance_1 = 
                    bootstrap.Tooltip.getOrCreateInstance(element_1);
                var tooltipInstance_2 = 
                    bootstrap.Tooltip.getOrCreateInstance(element_2);
                console.log(tooltipInstance_1);
                console.log(tooltipInstance_2);
                tooltipInstance_1.show();
                tooltipInstance_2.show();
            });
            
            // Create instances and hide tooltips on button click
            btn_2.addEventListener("click", function () {
                var tooltipInstance_1 = 
                    bootstrap.Tooltip.getOrCreateInstance(element_1);
                var tooltipInstance_2 = 
                    bootstrap.Tooltip.getOrCreateInstance(element_2);
                tooltipInstance_1.hide();
                tooltipInstance_2.hide();
            });
        });
    </script>
</body>

</html>

Output:

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


Next Article
Bootstrap 5 Tooltips show() Method

P
priyanshuchatterjee01
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox