Ladda 按钮不显示引导工具提示（Chrome / Edge - 但适用于 Firefox）答案

【问题标题】：Bootstrap tooltips do not appear for Ladda buttons (Chrome / Edge - but works in Firefox)Ladda 按钮不显示引导工具提示（Chrome / Edge - 但适用于 Firefox）
【发布时间】：2019-05-01 00:43:51
【问题描述】：

Google Chrome 和 MS Edge 中所有元素 except Ladda buttons 的鼠标悬停时都会显示 Twitter Bootstrap 工具提示（在相同的情况下，它们确实出现在 Firefox 中）。

使用 Twitter Bootstrap 2.3.2、3.4.1、4.3.0 测试；使用 Ladda 按钮 0.96 和 1.0.6 进行测试；使用 JQuery 1.9.1 和 3.3.1 进行测试（所有这些组合，对行为没有影响）。

两个 JSFiddles 来说明这一点，the first 使用 JQuery 1.9.1、Bootstrap 2.3.2 和 Ladda 0.96

The second 使用 JQuery 3.3.1、Bootstrap 4.3.0 和 Ladda 1.0.6

还有一个 Fiddle 脚本的 sn-p 以满足 StackOverflow 的编辑器：

var btn = $('#buttonladda');
var l = Ladda.create(btn[0]);
l.start();
btn.tooltip({opacity: 1.0, fade: true, placement: 'top', animation: false, container: 'body', html: false});

var adiv = $('#adiv');
adiv.tooltip({opacity: 1.0, fade: true, placement: 'top', animation: false, container: 'body', html: false});

在 Firefox 中，可以通过 Developer -> Inspector 工具观察鼠标悬停时（在 Ladda 按钮上）动态添加到 DOM 的工具提示元素。鼠标悬停时 Chrome / Edge 中的 DOM 内没有任何反应。

我无法确定为什么会这样，但如果其他人能发现我遗漏的东西，我当然会很感激。提前谢谢你。

【问题讨论】：

标签： twitter-bootstrap tooltip ladda

【解决方案1】：

在进一步调查后回答我自己的问题：具体来说，这与 Ladda 无关，而是 Ladda 在实例化时向目标按钮元素添加了“禁用”属性。

Firefox 会很高兴地在“禁用”元素上显示引导工具提示（或者更确切地说，Firefox 似乎会触发相关的鼠标事件），但 Chrome 不会。

将目标按钮包装在容器 div 中，并将我的 Bootstrap 工具提示添加到此容器即可解决问题。

【讨论】：