禁用按钮解决方法的引导工具提示答案

【问题标题】：Bootstrap tooltip on disabled button workaround禁用按钮解决方法的引导工具提示
【发布时间】：2017-09-24 20:37:01
【问题描述】：

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

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

所以我正在尝试这个：

<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

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

【问题讨论】：

好吧，jsfiddle 不起作用，因为您还没有加载必要的库...
@junkfoodjunkie 是的，我有吗？
为什么首先需要禁用按钮？ xy问题
@madalinivascu 这是一个严肃的问题吗？
@madalinivascu 不确定我理解你的意思，但请查看我的第二次编辑

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

如果你真的检查jsfiddle 你可以在那里看到一些CSS

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

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/

【讨论】：

还在#disabled-button-wrapper 下添加cursor:not-allowed; 使其看起来像一个禁用按钮

【解决方案2】：

你需要下面的CSS。

#disabled-button-wrapper .btn[disabled] {
  /* you need this line, not to block hover event from div */
  pointer-events: none;
}
#disabled-button-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
}

解释：-

您需要为禁用按钮设置pointer-events: none;，因为禁用按钮实际上会阻止来自其父容器的事件，因此您需要告诉不要阻止来自容器的悬停事件。

Demo

【讨论】：

【解决方案3】：

How to enable bootstrap tooltip on disabled button?

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

#disabled-button-wrapper {
  display: inline-block;
}

#disabled-button-wrapper .btn[disabled] {
  pointer-events: none;
}

#disabled-button-wrapper {
  cursor: not-allowed;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

【讨论】：