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

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

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


当前回答

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

其他回答

pointer-events:汽车;在<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">

这可以通过CSS来实现。“pointer-events”属性是阻止工具提示出现的原因。你可以通过覆盖bootstrap设置的"pointer-events"属性来让禁用按钮显示工具提示。

.btn.disabled {
    pointer-events: auto;
}

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

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

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

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

如果这对任何人都有帮助的话,我可以让一个禁用按钮显示一个工具提示,只需在其中放置一个span,并在那里应用工具提示的东西,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>

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