How to enable Bootstrap tooltip on disabled button ? - GeeksforGeeks

19 Jan, 2022
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: Trigger 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:
simmytarika5
Picked
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to execute PHP code using command line ?
How to Insert Form Data into Database using PHP ?
Types of CSS (Cascading Style Sheet)
What is web socket and how it is different from the HTTP?