Bootstrap tooltip disable button Firefox/Chrome

Question

I tried to add tooltip on disabled button

Sometime it's work with Firefox, sometime with Chrome

http://jsfiddle.net/danq3r8n/11/

<!-- Work only with Chrome !-->
<button disabled>
    <div data-toggle="tooltip" data-placement="left" title="test">
        Disable
    </div>
</button>

<!-- Work only with Firefox !-->
<button data-toggle="tooltip" data-placement="left" title="test" disabled>
    Disable
</button>

But I didn't success to make a disabled button with tooltip with can work on Firefox AND Chrome.

What's the problem with bootstrap tooltip?

Answer 1

Looks like this is a know issue with how the browsers work, and in the documentation for v4 they are saying you should wrap the button, quote from site:

Tooltips for .disabled or disabled elements must be triggered on a wrapper element.

v4 source

Upon further digging, it is also stated in the v3 documentation as such

Tooltips on disabled elements require wrapper elements

To add a tooltip to a disabled or .disabled element, put the element inside of a and apply the tooltip to that instead.

v3 source