Angular

I have this code for buttons and I want to shows the tooptips for disabled button. This works fine in Firefox and IE, but does not work in Chrome. In Chrome, only the buttons that are enabled showed the tooltip.

<div *ngFor"let btn of buttons">
   <button [tooltip]="'Tooltip'" [disabled]="btn.disable">
</div>

How do I display tooltip on disabled button?

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.

Why tooltip is not showing in angular?

Simply remove the culprit class uib-position-measure with javascript and then adjust the top and left styles on . tooltip . Overwrite the styling that is causing the issue with javascript.

This solution works for me:

<div *ngFor"let btn of buttons">
   <div [tooltip]="'Tooltip'">
      <button class='btn' [disabled]="btn.disable">
   </div>
</div>

<style>
   .btn:disabled{
      pointer-events: none;
   }
<style>