如何在禁用的按钮上启用Bootstrap提示框?

223

我需要在禁用的按钮上显示工具提示,并在启用的按钮上移除它。目前,它的行为相反。

如何才能最好地反转这种行为?

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


需要禁用的按钮已经被禁用了... - KoU_warch
@EH_warch 我想保持按钮禁用,但同时在单击事件上显示工具提示。 - Lorraine Bernard
3
这不会对楼主有所帮助,但是未来的访问者可能会欣赏知道 'readonly' 属性类似(虽然不完全相同),并且不会阻止像鼠标悬停这样的用户事件。 - Chuck
21个回答

-1

只需覆盖禁用元素悬停事件的 CSS 即可。

添加 CSS:

pointer-events: all !important;
cursor: not-allowed !important;

这将禁用按钮上的点击,但仍允许悬停事件启用工具提示功能


这不是一个解决方案,因为它也重新启用了点击事件。按钮在图形上看起来是禁用的,但它不再表现为禁用状态。 - Christian Vermeulen
实际上,我已经修改了答案,使其使用cursor: not-allowed。 - L4marr

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接