Bootstrap 5 Tooltips Usage

Last Updated : 16 Dec, 2022

Bootstrap 5 Tooltips usage is used to create the markup and the text on the elements when required, and the tooltip created is placed after the element that was triggered.

Using Javascript to launch Tooltips:

var example = document.getElementById('...')
var ... = new bootstrap.Tooltip(example, value)

Bootstrap 5 Tooltip usage :

Markup: The markup requires the title, data attribute, and on which element the tooltip wants to be placed. The tooltip is placed on the top of the elements by default.
Disabled elements: Disabled elements are not interactive with the user which means the user cannot hover, focus, or click the elements so we cannot trigger the tooltip for the disabled element. But we have a method to trigger the tooltip we wrap the disabled elements in <div> or <span> and pass the attribute tabindex=”0“.
Options: Options can be through the data attributes into the elements to perform some specific function. To pass the option we have to append the option name with data-bs- for example data-bs-animation=” true”.
Methods: Bootstrap 5 tooltip Methods are used to perform some specific functions on tooltips like show, hide, toggle, enable, disable, etc.

Example 1: In this example, we will have a disabled element with a tooltip placed on the top and a button with a tooltip placed on the left of the element.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="m-5"> 
    <center> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <strong>Bootstrap 5 Tooltips Usage</strong> 
        <br /> 
        <span class="d-inline-block" 
              data-bs-toggle="tooltip" 
              title="Disabled tooltip" tabindex="0"> 
            <button class="btn btn-primary" 
                    type="button" disabled> 
                    Disabled button 
            </button> 
        </span> 
        <button type="button" title="tooltip"
                class="btn btn-primary"  
                data-bs-toggle="tooltip" >  
                Button  
        </button> 
    </center> 
    <script type="text/javascript"> 
        var tooltipTriggerList =  
        [].slice.call(document.querySelectorAll 
                      ('[data-bs-toggle="tooltip"]')) 
        var tooltipList =  
            tooltipTriggerList.map(function(tooltipTriggerEl) { 
            return new bootstrap.Tooltip(tooltipTriggerEl) 
        })   
    </script> 
</body> 
</html>

Output:

Example 2: In this example, we will demonstrate bootstrap tooltip methods like show, hide, toggle, and destroy.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body class="m-5"> 
    <div class="container"> 
        <center> 
            <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <strong>Bootstrap 5 Tooltips Usage</strong> 
        <br /> 
            <button class="btn btn-primary" 
                    data-toggle="tooltip" 
                    title="tooltip!"> 
                    Tooltip Example 
            </button> 
            <div> 
                <p> 
                    Click on the buttons to manually  
                    control the tooltip above: 
                </p> 
                <button type="button" 
                        class="btn btn-primary"> 
                        Show 
                </button> 
                <button type="button" 
                        class="btn btn-warning"> 
                        Hide 
                </button> 
                <button type="button" 
                        class="btn btn-success"> 
                        Toggle 
                </button> 
                <button type="button" 
                        class="btn btn-danger"> 
                        Destroy 
                </button> 
            </div> 
        </center> 
    </div> 
  
    <script> 
        $(document).ready(function () { 
            $(".btn-primary").click(function () { 
                $("[data-toggle='tooltip']").tooltip('show'); 
            }); 
            $(".btn-warning").click(function () { 
                $("[data-toggle='tooltip']").tooltip('hide'); 
            }); 
            $(".btn-success").click(function () { 
                $("[data-toggle='tooltip']").tooltip('toggle'); 
            }); 
            $(".btn-danger").click(function () { 
                $("[data-toggle='tooltip']").tooltip('destroy'); 
            }); 
        }); 
    </script> 
</body> 
</html>