如何在禁用按钮上启用引导工具提示？

javascript jquery html twitter-bootstrap twitter-bootstrap-tooltip

2022-08-30 01:17:02

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

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

$('[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>

这是一个演示

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

答案 1

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

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

如果包装器有，那么工具提示似乎不起作用。使用和似乎工作正常。它似乎也可以与浮动包装器一起工作。display:inlinedisplay:blockdisplay:inline-block

更新这是一个更新的JSFiddle，可与最新的Bootstrap（3.3.6）配合使用。感谢@JohnLehmann建议禁用按钮。pointer-events: none;

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

答案 2

这可以通过CSS完成。“指针事件”属性是阻止工具提示出现的原因。您可以通过重写 bootstrap 设置的“指针事件”属性来获取禁用的按钮以显示工具提示。

.btn.disabled {
    pointer-events: auto;
}