在Bootstrap中，为什么我的禁用按钮没有工具提示？

Question

这是我的JSFiddle链接:

https://jsfiddle.net/h2kf5ztq/

我大部分是在尝试重现balexand的答案，来自于:

如何在禁用的按钮上启用bootstrap工具提示？

其中，CSS样式非常重要:

.tooltip-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
}

.tooltip-wrapper .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

.tooltip-wrapper.disabled {
  /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
  cursor: not-allowed;
}

但是不知何故，我的禁用按钮没有工具提示。

我该如何启用工具提示？

- Mary

---

你看过这个链接吗？https://dev59.com/HWYr5IYBdhLWcg3w6OGd - TAB

是的，正如我的问题所示。 - Mary

您缺少激活工具提示的jQuery代码：https://jsfiddle.net/ah3016vy/ - Temani Afif

Answer 1

看起来你忘记了激活你的工具提示。

你可以通过在按钮包装器中添加data-toggle="tooltip"，然后在JS中添加$('[data-toggle="tooltip"]').tooltip()来实现这一点。

此外，还有一个子部分展示了在禁用元素上启用工具提示的最佳方法。

- Hybrid

---

在文档中重申这一行：“由于性能原因，工具提示是选择加入的，因此您必须自己初始化它们。” - James Ives

Answer 2

首先，要初始化工具提示，您需要通过javascript调用它。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

要调用JavaScript，您需要在HTML中添加"data-toggle =“ tooltip”"，这是您唯一的错误。

更新的Fiddle：https://jsfiddle.net/q18vefym/

- Nisharg Shah