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

【问题标题】：In Bootstrap, why doesn't my disabled button have a tooltip?在 Bootstrap 中，为什么我的禁用按钮没有工具提示？
【发布时间】：2019-09-10 17:00:29
【问题描述】：

我的 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;
}

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

如何启用工具提示？

【问题讨论】：

你看这个链接了吗stackoverflow.com/questions/13311574/…
是的，从我的问题中可以看出。
您缺少用于激活工具提示的 jquery 代码：jsfiddle.net/ah3016vy

标签： javascript html css twitter-bootstrap

【解决方案1】：

你好像忘了activate your tooltip.

您可以通过将 data-toggle="tooltip" 添加到您的按钮包装器中，然后将 $('[data-toggle="tooltip"]').tooltip() 添加到您的 JS 中来做到这一点。

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

【讨论】：

在文档中呼应这一行； Tooltips are opt-in for performance reasons, so you must initialize them yourself.

【解决方案2】：

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

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

要调用javascript，您的HTML 中需要有data-toggle="tooltip"，这只是您的错误。

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

【讨论】：