我需要在禁用按钮上显示工具提示,并在启用按钮上删除它。目前,它是反向工作的。
扭转这种行为的最好方法是什么?
$('[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属性。
pointer-events:汽车;在<input type="text" />上无效。
我采取了不同的方法。我没有禁用输入字段,但使其作为通过css和javascript禁用。
因为输入字段没有被禁用,所以工具提示显示正常。在我的情况下,如果输入字段被禁用,这比添加包装器要简单得多。
$(document).ready(function () {
$('.disabled[data-toggle="tooltip"]').tooltip();
$('.disabled').mousedown(function(event){
event.stopImmediatePropagation();
return false;
});
});
input[type=text].disabled{
cursor: default;
margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<input type="text" name="my_field" value="100" class="disabled" list="values_z1" data-toggle="tooltip" data-placement="top" title="this is 10*10">
我在动态控件上也有同样的问题,所以我只是简单地这样做,设置样式属性并启用只读属性= true,当我们需要禁用元素时,但如果用户单击输入按钮控件,则显示工具提示。
是禁用停止所有事件功能,如ObBlur, onClick /OnFocus。代替下面的线:
((document.getElmentByName (MYINPUTBTN) .item(0)))。禁用= true。
我们可以通过下面的代码,工具提示将在禁用输入按钮元素中启用。
((document.getElmentByName('MYINPUTBTN').item(0))).setAttribute(“style”, “background-color”: #e9ecef;“);
b
希望这能解决这个问题。