如何在禁用的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:blockdisplay:inline-block似乎工作正常。 它也似乎与浮动包装工作正常。

更新这是一个更新的JSFiddle与最新的Bootstrap(3.3.6)。 感谢@JohnLehmannbuild议的pointer-events: none; 为残疾人button。

http://jsfiddle.net/cSSUA/209/

这可以通过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">