javascript - 如何在禁用按钮上启用 Bootstrap 工具提示？

Question

我需要在禁用按钮上显示工具提示并在启用按钮上将其删除。目前，它是反向工作的。

扭转这种行为的最佳方法是什么？

$('[rel=tooltip]').tooltip();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

这里是 demo

P.S.:我想保留 disabled 属性。

Answer 1

您可以包装禁用的按钮并将工具提示放在包装器上:

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

如果包装器有 display:inline 那么工具提示似乎不起作用。使用 display:block 和 display:inline-block 似乎工作正常。它似乎也适用于 float 包装器。

更新 这是一个更新的 JSFiddle，它适用于最新的 Bootstrap (3.3.6)。感谢@JohnLehmann 建议 pointer-events: none; 禁用按钮。

http://jsfiddle.net/cSSUA/209/