我需要在禁用按钮上显示工具提示，并在启用按钮上将其删除。 实际上它以相反的方式工作。
反转此行为的最佳方法是什么？
$('[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>
以下是演示：http://jsfiddle.net/BA4zM/68/
P.S。：我想保持属性被禁用。
答案 0 :(得分：227)
您可以包装已禁用的按钮并将工具提示放在包装器上：
<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似乎工作正常。它似乎也适用于浮动包装。
UPDATE这是一个更新的JSFiddle，它与最新的Bootstrap（3.3.6）一起使用。感谢@JohnLehmann为禁用按钮建议pointer-events: none;。
答案 1 :(得分：104)
这可以通过CSS完成。 ＆＃34;指针事件＆＃34;属性是阻止工具提示出现的原因。您可以通过覆盖＆＃34;指针事件＆＃34;来禁用按钮来显示工具提示。由bootstrap设置的属性。
.btn.disabled {
pointer-events: auto;
}
答案 2 :(得分：24)
如果您对复选框，文本框等工具提示感到绝望（就像我一样），那么这是我的hackey解决方法：
$('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/
对于它的价值，我相信禁用表单元素的工具提示对于UX非常重要。如果你阻止某人做某事，你应该告诉他们原因。
答案 3 :(得分：16)
以下是一些有效的代码：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");
}
});
我们的想法是使用selector选项将工具提示添加到父元素，然后在启用/禁用按钮时添加/删除rel属性。
答案 4 :(得分：6)
这些变通办法很丑陋。我调试的问题是bootstrap会在禁用的元素上自动设置CSS属性 pointer-events：none 。
这个神奇的属性导致JS无法处理与CSS选择器匹配的元素上的任何事件。
如果您将此属性覆盖为默认属性，则所有内容都像魅力一样，包括工具提示！
.disabled {
pointer-events: all !important;
}
但是你不应该使用这样的常规选择器，因为你可能必须手动停止你知道的JavaScript事件传播（ e.preventDefault（））。
答案 5 :(得分：5)
您无法在禁用的按钮上显示工具提示。这是因为禁用的元素不会触发任何事件，包括工具提示。你最好的选择是伪造按钮被禁用（因此它的外观和行为类似于禁用），因此你可以触发工具提示。
EG。使用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/
答案 6 :(得分：5)
就我而言，上述解决方案均无效。我发现使用绝对元素重叠禁用按钮更容易：
#include <future>
#include <vector>
#define BOOST_THREAD_VERSION 4
#include <boost/thread.hpp>
void wait_for_any(std::vector<boost::future<void>> & v)
{
boost::wait_for_any(std::begin(v), std::end(v));
}
答案 7 :(得分：4)
您可以简单地覆盖Bootstrap＆＃34;指针事件＆＃34;通过CSS禁用按钮的样式，例如
.btn[disabled] {
pointer-events: all !important;
}
最好还是明确并禁用特定按钮，例如
#buttonId[disabled] {
pointer-events: all !important;
}
答案 8 :(得分：4)
试试这个例子：
必须使用/do-something-on-entity/:entity_id/step-2/初始化工具提示：选择指定的元素并调用/do-something-on-entity/:entity_id/step-3/中的jQuery方法：
tooltip()添加JavaScript：
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
你的HTML：
CSS答案 9 :(得分：4)
基于 Bootstrap 4
禁用的元素 具有禁用属性的元素不是交互式的，这意味着用户无法聚焦，悬停或单击它们来触发工具提示（或弹出窗口）。作为一种解决方法，您将希望通过包装器触发工具提示，最好使用tabindex =“ 0”使其键盘可聚焦，并覆盖禁用元素上的指针事件。
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
此处的所有详细信息：Bootstrap 4 doc
答案 10 :(得分：3)
这就是我和tekromancr提出的。
示例元素：
<a href="http://www.google.com" id="btn" type="button" class="btn btn-disabled" data-placement="top" data-toggle="tooltip" data-title="I'm a tooltip">Press Me</a>
注意：工具提示属性可以添加到一个单独的div中，在调用.tooltip时使用该div的id（＆＃39; destroy＆＃39;）;或.tooltip（）;
这会启用工具提示，将其放入html文件中包含的任何javascript中。但是，这行可能没有必要添加。 （如果工具提示显示没有此行，那么不要包括它）
$("#element_id").tooltip();
销毁工具提示，请参阅下面的使用方法。
$("#element_id").tooltip('destroy');
阻止按钮可点击。因为没有使用disabled属性，所以这是必要的，否则按钮仍然是可点击的，即使它＆＃34;看起来＆＃34;好像被禁用了。
$("#element_id").click(
function(evt){
if ($(this).hasClass("btn-disabled")) {
evt.preventDefault();
return false;
}
});
使用bootstrap，您可以使用btn和btn-disabled类。 在您自己的.css文件中覆盖这些。你可以添加任何颜色或任何你想要的按钮在禁用时的样子。确保你保留光标：默认;你也可以改变.btn.btn-成功的样子。
.btn.btn-disabled{
cursor: default;
}
将以下代码添加到控制按钮启用的任何javascript中。
$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');
工具提示现在只应在按钮被禁用时显示。
如果你正在使用angularjs，我也有一个解决方案，如果需要的话。
答案 11 :(得分：3)
如果它可以帮助任何人，我可以通过在其中放置一个跨度并在其中应用工具提示内容（在其周围使用angularjs）来获得禁用按钮以显示工具提示。
<button ng-click="$ctrl.onClickDoThis()"
ng-disabled="!$ctrl.selectedStuff.length">
<span tooltip-enable="!$ctrl.selectedStuff.length"
tooltip-append-to-body="true"
uib-tooltip="Select at least one thing to enable button.">
My Butt
</span>
</button>
答案 12 :(得分：1)
Bootstrap 3.3.6的工作代码
使用Javascript：
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
$(".btn").click(function(e) {
if ($(this).hasClass("disabled")){
e.preventDefault();
}
});
CSS：
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: auto;
}
答案 13 :(得分：1)
您可以使用CSS3模仿效果。
只需将禁用状态从按钮上移开，工具提示就不再出现了......这对于验证非常有用，因为代码需要较少的逻辑。
我写这支钢笔来说明。
[disabled] {
&[disabled-tooltip] {
cursor:not-allowed;
position: relative;
&:hover {
&:before {
content:'';
border:5px solid transparent;
border-top:5px solid black;
position: absolute;
left: 50%;
transform: translate(-50%, calc(-100% + -5px));
}
&:after {
content: attr(disabled-tooltip);
position: absolute;
left: 50%;
transform: translate(-50%, calc(-100% + -15px));
width:280px;
background-color:black;
color:white;
border-radius:5px;
padding:8px 12px;
white-space:normal;
line-height:1;
}
}
}
}
<button type="button" class="btn btn-primary" disabled-tooltip="I am a disabled tooltip using CSS3.. You can not click this button." disabled>Primary Button</button>
答案 14 :(得分：0)
我在动态控件上遇到了同样的问题，所以我只是简单地通过设置样式属性并启用只读属性 = true 当我们需要禁用元素但如果用户单击输入按钮控件时显示工具提示.
是禁用停止所有事件功能，如 ObBlur、onClick /OnFocus。代替下面的行：
((document.getElmentByName('MYINPUTBTN').item(0))).disabled= true;
在禁用的输入按钮元素中启用工具提示后，我们可以通过以下代码进行操作。
((document.getElmentByName('MYINPUTBTN').item(0))).setAttribute("style", "background-color": #e9ecef;");
b
希望这能解决问题。
答案 15 :(得分：0)
我终于解决了这个问题，至少使用Safari，方法是将“指针事件：自动”放在之前“禁用”。反向顺序无效。
答案 16 :(得分：0)
只需将禁用类添加到按钮上，而不是添加disabled属性，即可使其明显地被禁用。
<button class="btn disabled" rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
注意：该按钮似乎仅处于禁用状态，但仍会触发事件，您只需要注意这一点即可。
答案 17 :(得分：0)
对于Bootstrap 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>
答案 18 :(得分：0)
pointer-events: auto;不适用于<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">