How to enable Bootstrap tooltip on disabled button ?

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

Recommended Posts: