我需要在禁用按钮上显示工具提示,并在启用按钮上删除它。目前,它是反向工作的。
扭转这种行为的最好方法是什么?
$('[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属性。
试试这个例子:
工具提示必须使用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>
无法在禁用按钮上显示工具提示。这是因为禁用的元素不会触发任何事件,包括工具提示。最好的方法是假装按钮已禁用(这样它的外观和行为就像已禁用一样),这样您就可以触发工具提示。
如。Javascript:
$('[rel=tooltip].disabled').tooltip();
$('[rel=tooltip].disabled').bind('click', function(){
return false;
});
而不仅仅是$('[rel=tooltip]').tooltip();
HTML:
<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>
JSFiddle: http://jsfiddle.net/BA4zM/75/
下面是一些工作代码:http://jsfiddle.net/mihaifm/W7XNU/200/
$('body').tooltip({
selector: '[rel="tooltip"]'
});
$(".btn").click(function(e) {
if (! $(this).hasClass("disabled"))
{
$(".disabled").removeClass("disabled").attr("rel", null);
$(this).addClass("disabled").attr("rel", "tooltip");
}
});
其思想是将工具提示添加到带有选择器选项的父元素中,然后在启用/禁用按钮时添加/删除rel属性。