Bootstrap 5 Tooltips dispose() Method

Last Updated : 10 Jan, 2023

Bootstrap 5 Tooltips dispose() method is used to manually destroy a tooltip. This can be useful if you want to dynamically create and destroy tooltips based on certain conditions or events in your web application.

Syntax:

tooltip.dispose()

Example 1: In this example, if the user hovers the cursor on the button element, the tooltip will appear. If the user hovers on the element the tooltip will destroy which will never appear until the user refreshes the screen.

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.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-success">GeeksforGeeks</h1> 
    <h3>Bootstrap 5 Tooltips dispose() Method</h3> 
    <h6>If you leave the cursor once from the element, 
        the tooltip will destory</h6> 
    <button id="my-element" type="button" class="btn btn-primary" 
          data-toggle="tooltip" title="This is a tooltip"> 
          Hover over me 
    </button> 
  
    <script> 
        $(document).ready(function() { 
            $('#my-element').tooltip(); 
  
            $('#my-element').on('mouseleave', function() { 
                $(this).tooltip('dispose'); 
            }); 
        }); 
    </script> 
</body> 
</html>

Output :

Bootstrap 5 Tooltips dispose() Method

Example 2: In this example, if the user hovers the cursor on the button element, the tooltip will appear. If the user clicks on the element the tooltip will destroy which will never appear until the user refreshes the screen.

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.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-success">GeeksforGeeks</h1> 
    <h3>Bootstrap 5 Tooltips dispose() Method</h3> 
    <h6>If you click the element once the tooltip will destory</h6> 
    <button id="my-element" type="button" class="btn btn-primary" 
            data-toggle="tooltip" title="This is a tooltip"> 
        Hover over me 
    </button> 
  
    <script> 
        $(document).ready(function() { 
            $('#my-element').tooltip(); 
  
            $('#my-element').on('click', function() { 
                $(this).tooltip('dispose'); 
            }); 
        }); 
    </script> 
</body> 
</html>