javascript - 关于禁用按钮解决方法的 Bootstrap 工具提示

Question

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

我正在尝试将按钮包装在一个 div 中并在此元素中初始化工具提示，如 this 所建议的那样我在 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>

jsfiddle

但是工具提示根本不起作用。实际上，这甚至不是因为按钮，无论内容是什么，工具提示都无法在包装器 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/