我需要在禁用按钮上显示工具提示,并在启用按钮上删除它。目前,它是反向工作的。
扭转这种行为的最好方法是什么?
$('[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属性。
如果你(像我一样)迫切需要复选框、文本框之类的工具提示,那么这里是我的破解方法:
$('input:disabled, button:disabled').after(function (e) {
d = $("<div>");
i = $(this);
d.css({
height: i.outerHeight(),
width: i.outerWidth(),
position: "absolute",
})
d.css(i.offset());
d.attr("title", i.attr("title"));
d.tooltip();
return d;
});
工作示例:http://jsfiddle.net/WB6bM/11/
无论如何,我相信禁用表单元素的工具提示对用户体验非常重要。如果你阻止某人做某事,你应该告诉他们原因。
下面是一些工作代码: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属性。
这些变通办法是丑陋的。我已经调试的问题是,引导自动设置CSS属性指针事件:无禁用元素。
这个神奇的属性导致JS无法处理与CSS选择器匹配的元素上的任何事件。
如果你将这个属性重写为默认属性,所有的东西都会像魔法一样工作,包括工具提示!
.disabled {
pointer-events: all !important;
}
然而,你不应该使用这种通用的选择器,因为你可能不得不手动停止JavaScript事件传播的方式,你知道的(e.c preventdefault())。