我需要在禁用按钮上显示工具提示，并在启用按钮上删除它。目前，它是反向工作的。
扭转这种行为的最好方法是什么?
$('[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属性。
我在动态控件上也有同样的问题，所以我只是简单地这样做，设置样式属性并启用只读属性= true，当我们需要禁用元素时，但如果用户单击输入按钮控件，则显示工具提示。
是禁用停止所有事件功能，如ObBlur, onClick /OnFocus。代替下面的线:
((document.getElmentByName (MYINPUTBTN) .item(0)))。禁用= true。
我们可以通过下面的代码，工具提示将在禁用输入按钮元素中启用。
（（document.getElmentByName（'MYINPUTBTN'）.item（0）））.setAttribute（“style”， “background-color”： #e9ecef;“）;
b
希望这能解决这个问题。
引导3
HTML
<button
class="btn btn-success"
disabled
data-hint="Enabled">
<div class="sp-btn-overlap" data-hint="Disabled"></div>
Submit button
</button>
CSS
button { position:relative; }
.sp-btn-overlap {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:none;
border:none;
z-index:1900;
}
JS
$('button .sp-btn-overlap')
.popover({
trigger: 'hover',
container: 'body',
placement: 'bottom',
content: function() {
return $(this).parent().prop('disabled')
? $(this).data('hint')
: $(this).parent().data('hint');
}
});
$('button .sp-btn-overlap')
.popover({
trigger: 'hover',
container: 'body',
placement: 'bottom',
content: function() {
return $(this).parent().prop('disabled')
? $(this).data('hint')
: $(this).parent().data('hint'); }
});
button {
position:relative; /* important! */
}
.sp-btn-overlap {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:none;
border:none;
z-index:1900;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button disabled class="btn btn-default" data-hint="Enabled">
<div class="sp-btn-overlap" data-hint="Disabled"></div>
Disabled button
</button>
<button class="btn btn-default" data-hint="Enabled">
<div class="sp-btn-overlap" data-hint="Disabled"></div>
Enabled button
</button>
如果你(像我一样)迫切需要复选框、文本框之类的工具提示，那么这里是我的破解方法:
$('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/
无论如何，我相信禁用表单元素的工具提示对用户体验非常重要。如果你阻止某人做某事，你应该告诉他们原因。
你可以包装禁用按钮，并将工具提示放在包装器上:
<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/
