我需要在禁用按钮上显示工具提示,并在启用按钮上删除它。目前,它是反向工作的。

扭转这种行为的最好方法是什么?

$('[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属性。


当前回答

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;
}

其他回答

我最终解决了这个问题,至少在Safari中,我把“pointer-events: auto”放在了“disabled”之前。相反的顺序行不通。

无法在禁用按钮上显示工具提示。这是因为禁用的元素不会触发任何事件,包括工具提示。最好的方法是假装按钮已禁用(这样它的外观和行为就像已禁用一样),这样您就可以触发工具提示。

如。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/

这些变通办法是丑陋的。我已经调试的问题是,引导自动设置CSS属性指针事件:无禁用元素。

这个神奇的属性导致JS无法处理与CSS选择器匹配的元素上的任何事件。

如果你将这个属性重写为默认属性,所有的东西都会像魔法一样工作,包括工具提示!

.disabled {
  pointer-events: all !important;
}

然而,你不应该使用这种通用的选择器,因为你可能不得不手动停止JavaScript事件传播的方式,你知道的(e.c preventdefault())。

你可以简单地覆盖Bootstrap的“指针事件”样式通过CSS禁用按钮。

.btn[disabled] {
 pointer-events: all !important;
}

最好还是显式地禁用特定的按钮。

#buttonId[disabled] {
 pointer-events: all !important;
}

4 .基于Bootstrap

禁用元素 具有disabled属性的元素不能交互,这意味着用户不能聚焦、悬停或单击它们来触发工具提示(或弹出窗口)。作为一种解决方案,您将希望从包装器触发工具提示,或者使用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