Bootstrap 5 Tooltips Usage Disabled Elements

Last Updated : 17 Feb, 2023

Bootstrap 5 Tooltips are a JavaScript plugin that allows you to add small, interactive, text-based hints to elements on your web page. They are displayed when the user hovers over, clicks on, or focuses on the element. Tooltips can be used to provide additional information about an element, such as a description, or to display a message when an element is disabled.

In Bootstrap 5, tooltips are created by adding the data-bs-toggle=”tooltip” attribute to an HTML element and providing a title attribute with the text to be displayed in the tooltip. The tooltips are initialized using JavaScript, usually within the $(document).ready() function, by calling the $(‘[data-toggle=”tooltip”]’).tooltip() method. The Disabled elements can be made with the help of the disabled attribute that removes the focus, hover, or click them to trigger a tooltip (or popover).

Syntax:

<button data-toggle="tooltip" 
        data-placement="top" 
        title="Tooltip Text" disabled>
   ...
</button>

Bootstrap 5 Tooltips Usage Disabled elements Attributes:

data-toggle: Tooltips are created by adding the data-toggle=”tooltip” attribute to an HTML element.
disabled: Elements are created disabled by adding disabled attribute to the HTML element.

Example 1: The below example shows the tooltip on the enabled button on hovering as we have added data-toggle=”tooltip”.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
          crossorigin="anonymous" /> 
</head> 
  
<body class="m-3"> 
    <div class="container"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h3>Bootstrap tooltip</h3> 
  
        <button class="btn btn-primary" 
                disabled style="pointer-events:none"> 
            Disabled Button 
        </button> 
        <button class="btn btn-primary" 
                data-toggle="tooltip" 
                data-placement="top" 
                title="Tooltip on Enabled Button"> 
            Enabled Button 
        </button> 
    </div> 
    <script> 
        $(document).ready(function () { 
            $('[data-toggle="tooltip"]').tooltip(); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The below example shows the tooltip on the enabled link on hovering as we have added data-toggle=”tooltip”.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity= 
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
        crossorigin="anonymous" /> 
</head> 
  
<body class="m-3"> 
    <div class="container"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h3>Bootstrap tooltip</h3> 
        <a href="#" disabled  
           style="pointer-events:none"> 
            Disabled Link 
        </a>    
        <a href="#" 
              
           data-toggle="tooltip" 
           data-placement="top" 
           title="Tooltip on Enabled Link"> 
            Enabled Link 
        </a> 
    </div> 
    <script> 
        $(document).ready(function () { 
            $('[data-toggle="tooltip"]').tooltip(); 
        }); 
    </script> 
</body> 
  
</html>