gpt4 book ai didi

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

转载 作者:IT老高 更新时间:2023-10-28 11:10:06 27 4
gpt4 key购买 nike

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

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

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

最佳答案

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

<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:blockdisplay:inline-block 似乎工作正常。它似乎也适用于 float 包装器。

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

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

关于javascript - 如何在禁用按钮上启用 Bootstrap 工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13311574/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com