JSFiddle - React, Tailwind, and code Playground

by Terrance Smith

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="tooltip-wrapper disabled" data-title="Dieser Link führt zu Google">
<button class="btn btn-default" disabled>button disabled</button>
</div>
<div class="tooltip-wrapper disabled" data-title="Dieser Link führt zu Google">
<button class="btn btn-default" >button enabled</button>
</div>

CSS

.tooltip-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
}

.tooltip-wrapper .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

.tooltip-wrapper.disabled {
  /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
  cursor: not-allowed;
}

JavaScript

$(function() {
    $('.tooltip-wrapper').tooltip({position: "bottom"});
});