How to enable Bootstrap tooltip on disabled button ?

Last Updated : 30 Sep, 2019

Button or link elements with disabled class and attribute is not interactive. It means users cannot focus, hover, or click them to trigger a tooltip (or popover) or any functions. Use the following approaches to enable a tooltip on disabled-buttons.

Using jQuery
Using HTML
Using CSS

Initializing tooltip:

By default tooltips is initialized by selecting the specified element and call the tooltip() method using jQuery. Then add a title attribute to that specified element which contains what text to be displayed inside tooltip.
To position the tooltip data-placement attribute must be added to that specified element with top/bottom/right/left as its values.

// Initializing the tooltip
$(document).ready(function() { 
    $('[data-toggle="tooltip"]').tooltip();    
});

Note: By default data-toggle=”tooltip” will enable tooltip of disabled button.

Approach:

Initialize tooltips in bootstrap disabled buttons with the specified element and call the tooltip() method.
To trigger tooltip on disabled button by wraping them in <span> span tag and <div> div tag and then adding ‘data-toggle’,’data-placement’ and ‘title’ attributes to it along with its values respectively.

Example: This example illustrates triggering tooltip by wraping disabled button inside div and span tag.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Disabled Button Tooltip</title>
  
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
  
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <style>
        .disabled {
            pointer-events: all !important;
        }
    </style>
</head>
  
<body style="text-align:center;">
  
    <div class="container pt-5">
  
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1>
  
        <h4>
          Disabled buttons wrapped inside an elements
        </h4>
  
        <div class="d-inline-block" tabindex="0" data-toggle="tooltip" 
             data-placement="bottom" title="This button is disabled">
            <button type="button" class="btn btn-warning" 
                    style="pointer-events: none;" disabled>
              Button wrapped in Div tag
            </button>
        </div>
  
        <span class="d-inline-block" tabindex="0" data-toggle="tooltip"
              data-placement="right" title="This button is disabled">
                <button class="btn btn-outline-warning" 
                        style="pointer-events: none;"type="button" disabled>
                  Button wrapped in span tag
                </button>
        </span>
    </div>
  
    <script>
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
  
</body>
  
</html>       

Output:

Example 2: This example uses HTML to display tooltip information about the content on any disabled button. For this, just disable the button and add the title attribute on it.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Tooltip on disabled button
    </title>
  
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>Tooltip on Disabled button</h3>
        <div>
            <button disabled="disabled" title="My Tooltip">
              Disabled Button
            </button>
            <button title="Here it's common">Not Disabaled</button>
        </div>
  </center>
</body>
  
</html>  

Output:

Example 3: Tigger tooltip on disabled bootstrap buttons using CSS.

<!DOCTYPE html>
<html>
<title>Disabled Button Tooltip</title>
  
<style>
    .tooltip1 {
        position: relative !important;
        display: inline-block !important;
        width: 175px !important;
        font-size: 14px;
    }
      
    .tooltip1 .tooltiptext {
        visibility: hidden;
        width: 120px !important;
        background-color: black !important;
        color: #fff !important;
        text-align: center !important;
        border-radius: 6px !important;
        padding: 5px 0 !important;
        position: absolute !important;
        z-index: 1 !important;
        top: -5px !important;
        left: 110% !important;
    }
      
    .tooltip1 .tooltiptext::after {
        content: "";
        position: absolute !important;
        top: 50% !important;
        right: 100% !important;
        margin-top: -5px !important;
        border-width: 5px !important;
        border-style: solid !important;
        border-color: transparent black transparent transparent !important;
    }
      
    .tooltip1:hover .tooltiptext {
        visibility: visible !important;
    }
</style>
  
<body style="text-align:center;">
    <div class="container pt-5">
  
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1>
  
        <h4>
          Trigger tooltip on disabled 
          bootstrap buttons using CSS
        </h4>
  
        <button class="btn btn-outline-info tooltip1 " disabled>
          Hover over me
            <span class="tooltip1 tooltiptext">
              disabled button
            </span>
        </button>
    </div>
  
</body>
  
</html>

Output:

My Personal Notes

Related Articles

How to enable Bootstrap tooltip on disabled button ?