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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <script src=
    </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>       

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>  

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.