title: display a tooltip on a disabled button and remove it if it is enabled using AngularJS on one button
body: <p>Here is my code: The tooltip shows only when its enabled. I need it to invert.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="tooltip-wrapper disabled" data-title="testing" uib-tooltip="TESTing" tooltip-enable="disabledBtn"&gt;
       &lt;button class="btn btn-primary btn-block" type="button" ng-hide="editMode" ng-click="clickDelete()" ng-model="disabledBtn" ng-disabled="!disabledBtn" ng-style="{'pointer-events':!disabledBtn ? 'none' : ''}"&gt;Delete&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.tooltip-wrapper {
    display: inline-block; /* display: block works as well */
    margin: 50px; /* make some space so the tooltip is visible */
  }enter code here
  
  .tooltip-wrapper .btn[disabled] {
    /* don't let button block mouse events from reaching wrapper */
    pointer-events: none;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> $(function () {
        $('.tooltip-wrapper').tooltip({ position: "bottom" });
   });
  </code></pre>