Disabled Bootstrap 4 button with tooltip in Angular

Question

I am trying to create a Bootstrap 4 button with ngx-bootstrap and Angular. However only hovering on the icon of the disabled button shows the tooltip. How do I make the hovering over anywhere on a disabled button to show the tooltip.

The code: Only hovering on the icon works:

<span tooltip="hello" [isDisabled]="false">
    <button type="button" class="btn btn-primary" disabled>
        <i class="fa fa-book-open"></i> btn disabled
    </button>
</span>

And here is a working example: https://stackblitz.com/edit/ngx-bootstrap-rmnmf1

Answer 1

One potential solution is to create tooltip inside button. It will start showing the tooltip for anything inside <button> tag

<button type="button" class="btn btn-primary" disabled>
  <span tooltip="hello" [isDisabled]="false">
    <i class="fa fa-book-open"></i> btn disabled
  </span>
</button>