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

Question

我的JSFiddle在这里：

https://jsfiddle.net/h2kf5ztq/

我在很大程度上尝试重现balexand的答案：

How to enable bootstrap tooltip on disabled button?

重要的是包括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;
}

但是由于某些原因，我的禁用按钮没有工具提示。

如何启用工具提示？

Answer 1

您似乎忘记了activate your tooltip.

您可以通过在按钮包装中添加NotificantionCenter，然后在您的JS中添加data-toggle="tooltip"来实现。

此外，还有一个小节显示了前往enable tooltips on disabled elements.的最佳方法

Answer 2

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

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

要调用javascript，您需要在HTML中插入data-toggle="tooltip"，这是唯一的错误。

更新的小提琴：https://jsfiddle.net/q18vefym/