Search code examples
angularbootstrap-4ngx-bootstrap

Disabled Bootstrap 4 button with tooltip in Angular

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

enter image description here

Solution

  • 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>