Question

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

我正在尝试将按钮包装在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

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

Answer 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/

Answer 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

Answer 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>

禁用按钮解决方法

3 个答案: