Open In App

How to enable Bootstrap tooltip on disabled button ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 wrapping 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 wrapping disabled button inside div and span tag. 

html




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


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. 

html




<!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 Disabled</button>
        </div>
  </center>
</body>
 
</html


Output:

  

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

html




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

 



Last Updated : 26 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads