我需要在禁用按钮上显示工具提示,并在启用按钮上删除它。目前,它是反向工作的。
扭转这种行为的最好方法是什么?
$('[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())。
无法在禁用按钮上显示工具提示。这是因为禁用的元素不会触发任何事件,包括工具提示。最好的方法是假装按钮已禁用(这样它的外观和行为就像已禁用一样),这样您就可以触发工具提示。
如。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/
我在动态控件上也有同样的问题,所以我只是简单地这样做,设置样式属性并启用只读属性= true,当我们需要禁用元素时,但如果用户单击输入按钮控件,则显示工具提示。
是禁用停止所有事件功能,如ObBlur, onClick /OnFocus。代替下面的线:
((document.getElmentByName (MYINPUTBTN) .item(0)))。禁用= true。
我们可以通过下面的代码,工具提示将在禁用输入按钮元素中启用。
((document.getElmentByName('MYINPUTBTN').item(0))).setAttribute(“style”, “background-color”: #e9ecef;“);
b
希望这能解决这个问题。