How to enable Bootstrap tooltip on disabled button?

Question

I need to display a tooltip on a disabled button and remove it on an enabled button. Currently, it works in reverse.

What is the best way to invert this behaviour?

Answer 1

These workarounds are ugly. I've debugged the problem is that bootstrap automatically set CSS property pointer-events: none on disabled elements.

This magic property causes that JS is not able to handle any event on elements that matches CSS selector.

If you overwrite this property to default one, everything works like a charm, including tooltips!

.disabled {
  pointer-events: all !important;
}

However you shouldn't use so general selector, because you will probably have to manually stop JavaScript event propagation way you know (e.preventDefault()).