JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!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"> 
   
       
  
  
        <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> 
                  Disabled button
                </button> 
        </span> 
    </div> 
  
    <script> 
        $(document).ready(function() { 
            $('[data-toggle="tooltip"]').tooltip(); 
        }); 
    </script> 
  
</body> 
  
</html>