javascript - Bootstrap 工具提示禁用按钮 Firefox/Chrome

Question

我尝试在禁用按钮上添加工具提示

有时它适用于 Firefox，有时适用于 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>

但我没有成功制作一个带有工具提示的禁用按钮，并且可以在 Firefox 和 Chrome 上工作。

Bootstrap 工具提示有什么问题？

Answer 1

看起来这是一个 know issue关于浏览器的工作方式，在 v4 的文档中他们说你应该包装按钮，引用自网站:

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

v4 source

经过进一步挖掘，v3 文档中也说明了这一点

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