我需要在禁用按钮上显示工具提示,并在启用按钮上删除它。目前,它是反向工作的。
扭转这种行为的最好方法是什么?
$('[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>
这是一个演示
附注:我想保留disabled属性。
这些变通办法是丑陋的。我已经调试的问题是,引导自动设置CSS属性指针事件:无禁用元素。
这个神奇的属性导致JS无法处理与CSS选择器匹配的元素上的任何事件。
如果你将这个属性重写为默认属性,所有的东西都会像魔法一样工作,包括工具提示!
.disabled {
pointer-events: all !important;
}
然而,你不应该使用这种通用的选择器,因为你可能不得不手动停止JavaScript事件传播的方式,你知道的(e.c preventdefault())。
试试这个例子:
工具提示必须使用jQuery初始化:选择指定的元素并调用JavaScript中的tooltip()方法:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
添加CSS:
.tool-tip {
display: inline-block;
}
.tool-tip [disabled] {
pointer-events: none;
}
和你的html:
<span class="tool-tip" data-toggle="tooltip" data-placement="bottom" title="I am Tooltip">
<button disabled="disabled">I am disabled</button>
</span>
你可以包装禁用按钮,并将工具提示放在包装器上:
<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似乎工作得很好。它似乎也可以很好地使用浮动包装器。
这是一个更新的JSFiddle,它与最新的Bootstrap(3.3.6)一起工作。感谢@JohnLehmann建议指针事件:没有;为禁用按钮。
http://jsfiddle.net/cSSUA/209/