如何在禁用的button上启用引导工具提示？
我需要在禁用的button上显示工具提示，并在启用的button上将其删除。 其实它是以相反的方式工作的。
什么是反转这种行为的最好方法？
$('[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/
PS：我想保持禁用的属性。
这是一些工作代码： 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选项将工具提示添加到父元素，然后在启用/禁用button时添加/删除rel属性。
你可以包装禁用的button，并将工具提示放在包装上：
<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）。 感谢@JohnLehmannbuild议的pointer-events: none; 为残疾人button。
这可以通过CSS完成。 “指针事件”属性是什么阻止工具提示出现。 您可以通过覆盖由bootstrap设置的“pointer-events”属性来禁用button以显示工具提示。
.btn.disabled { pointer-events: auto; }
如果你绝望（像我一样）checkbox，文本框等的工具提示，那么这里是我的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来说非常重要。 如果你阻止某人做某事，你应该告诉他们为什么。
这些解决方法是丑陋的。 我debugging过的问题是，引导程序自动设置CSS属性指针事件：没有禁用元素。
这个魔术属性导致JS无法处理与CSSselect器匹配的元素上的任何事件。
如果您将此属性覆盖为默认值，则所有内容都将像魅力一样，包括工具提示！
.disabled { pointer-events: all !important; }
不过，你不应该使用如此普遍的select器，因为你可能不得不手动停止你知道的JavaScript事件传播方式（ e.preventDefault（） ）。
您无法获得显示在禁用button上的工具提示。 这是因为禁用的元素不会触发任何事件，包括工具提示。 你最好的select是伪造button被禁用（所以它看起来和行为像禁用），所以你可以触发工具提示。
例如。 使用Javascript：
$('[rel=tooltip].disabled').tooltip(); $('[rel=tooltip].disabled').bind('click', function(){ return false; });
$('[rel=tooltip]').tooltip();而不是$('[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/
这就是我和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>
注意：tooltip属性可以被添加到一个单独的div，在调用.tooltip（'destroy'）时使用该div的id。 或.tooltip（）;
这使得工具提示，把它放在HTML文件中包含的任何JavaScript。 但是这条线可能不需要添加。 （如果该工具提示显示不包含此行，则不要打扰包括它）
$("#element_id").tooltip();
破坏工具提示，请参阅下面的使用。
$("#element_id").tooltip('destroy');
防止button被点击。 因为禁用的属性没有被使用，所以这是必要的，否则button仍然是可点击的，即使它看起来好像被禁用了一样。
$("#element_id").click( function(evt){ if ($(this).hasClass("btn-disabled")) { evt.preventDefault(); return false; } });
使用引导程序，可以使用类btn和btn-disabled。 在您自己的.css文件中覆盖这些。 你可以添加任何颜色或任何你想要的button看起来像禁用时。 确保你保持光标：默认; 你也可以改变.btn.btn-success的样子。
.btn.btn-disabled{ cursor: default; }
将下面的代码添加到任何JavaScript正在控制button成为启用。
$("#element_id").removeClass('btn-disabled'); $("#element_id").addClass('btn-success'); $('#element_id).tooltip('destroy');
现在工具提示只能在button被禁用时显示。
如果你正在使用angularjs，我也有一个解决scheme，如果需要的话。
在我的情况下，上述解决scheme都没有工作。 我发现使用绝对元素重叠禁用button更容易：
<div rel="tooltip" title="I workz" class="wrap"> <div class="overlap"></div> <button>I workz</button> </div> <div rel="tooltip" title="Boo!!" class="wrap poptooltip"> <div class="overlap"></div> <button disabled>I workz disabled</button> </div> .wrap { display: inline-block; position: relative; } .overlap { display: none } .poptooltip .overlap { display: block; position: absolute; height: 100%; width: 100%; z-index: 1000; }
演示
你可以简单地通过CSS覆盖Bootstrap的“指针事件”风格的禁用button，例如
.btn[disabled] { pointer-events: all !important; }
更好的是明确的，禁用特定的button，例如
#buttonId[disabled] { pointer-events: all !important; }
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; }
试试这个例子：
工具提示必须用jQuery进行初始化：select指定的元素并在JavaScript调用tooltip()方法：
$(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); });
添加CSS ：
.tool-tip { display: inline-block; } .tool-tip [disabled] { pointer-events: none; }
而你的html：
<span class="tool-tip" data-toggle="tooltip" data-placement="bottom" title="I am Tooltip"> <button disabled="disabled">I am disabled</button> </span>
pointer-events: auto; 不适用于<input type="text" /> 。
我采取了不同的方法。 我不禁用input字段，但使其通过CSS和JavaScript禁用。
由于input字段没有被禁用，工具提示显示正确。 在我的情况下，比input字段被禁用时添加包装更简单。
$(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">
