Ngx-bootstrap: The tooltip doesn`t work when the button is disabled

[mcvova]

The tooltip doesn`t work when the button is disabled:
https://stackblitz.com/edit/ngx-bootstrap-tooltip

But it works in the original Bootstrap:
https://getbootstrap.com/docs/4.3/components/tooltips/#disabled-elements

ngx-bootstrap: 3.3.0
Angular: 6.0.3
Bootstrap: 4.1.1

[ludmilanesvitiy]

@mcvova
Just added a disabled button to our demo, it works properly.

[CzechsMix]

Here's a stackblitz link where I'm not seeing it work

https://angular-iffl92.stackblitz.io/

Browser: Chrome Version 72.0.3626.121 (Official Build) (64-bit)

[orkisz]

@ludmilanesvitiy
Please read this article: https://jakearchibald.com/2017/events-and-disabled-form-fields/

Probably Chrome and many other browsers stop emitting all mouse events on disabled form fields, including buttons.
Unfortunately there is nothing you can do about it.

@CzechsMix, @mcvova
Workaround:
triggers="pointerenter:pointerout"
Depending on content used inside button it may require to add pointer-events: none; in CSS for them.
Confirmed to work on:

• Chrome 73.0.3683.86
• FF 66.0.2
• IE 11.285.17134.0
• Edge 42.17134.1.0

[orkisz]

Other way is to use class "disabled" of bootstrap and not to disable button at all. Check whether to invoke action or not can be done inside handler method

[marceloloureiro]

Workaround

• Wrap your button in a span tag.
• Put the tooltip in that span.

[IraErshova]

I'm closing the issue. Please use workarounds from messages above if you want to see tooltip for disabled buttons.