JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-row">
   <div class="col-12">
      <div class="row ml-0 mr-0">
         <div class="row form-inline col-12 mt-2 mb-2 pt-2 pb-2 m-0">
            <div class="row col-12 mb-2 pl-0">
               <div class="tooltip-wrapper disabled" data-title="Dieser Link fĂĽhrt zu Google">
                 <span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
                   <button class="btn btn-sm btn-primary ml-auto" style="pointer-events: none;" type="button" disabled>Add</button>
                 </span>
               </div>
            </div>
         </div>
      </div>
   </div>
</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 () {
  $('[data-toggle="tooltip"]').tooltip()
});