禁用按钮解决方法的 Bootstrap 工具提示

Question

我试图在禁用的按钮上使用 Bootstrap 工具提示，让用户知道为什么按钮处于这种状态。然而，大多数浏览器不会在禁用元素上触发单击或悬停事件这一事实使事情变得更加困难。

我正在尝试将按钮包装在 div 中并初始化此元素中的工具提示，正如我在 SO 周围找到的这个解决方案所建议的那样。

所以我正在尝试这个：

<div id="disabled-button-wrapper" data-title="Tooltip title">
  <button class="btn btn-primary" disabled="disabled">Button</button>
</div>

<script>
    $(function() {
        $('#disabled-button-wrapper').tooltip();
    });
</script>

提琴手

但是工具提示根本不起作用。实际上，这甚至不是因为按钮，无论内容是什么，工具提示都不适用于包装器 div。这里发生了什么？我错过了什么明显的细节？

编辑：使用 Chrome 开发工具进行检查时，我确实看到正在生成工具提示元素，但有几个问题：

• 它仅在悬停在按钮右侧时触发：div 占据所有宽度（顺便说一句，我希望父级与按钮一样宽）。但不是当鼠标悬停在按钮上时。
• 工具提示元素隐藏在某处，未正确呈现。

编辑 2：我做了一些改变：jsfiddle

这样包装器就不会占用所有的宽度，使用主体作为容器可以解决渲染问题。现在唯一剩下的问题是：当鼠标悬停在禁用按钮所在的部分时，为什么没有在包装器上触发悬停事件？

Answer 1

如果你真的检查了jsfiddle 你可以在里面看到一些 css

1. 添加一些边距，以便我们可以看到默认位于按钮顶部的工具提示

2.css 不允许按钮阻止鼠标事件到达包装器

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

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

演示： https: //jsfiddle.net/dLt2ed5w/6/