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

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

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


当前回答

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

其他回答

下面是一些工作代码: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");
    }
});

其思想是将工具提示添加到带有选择器选项的父元素中,然后在启用/禁用按钮时添加/删除rel属性。

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

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

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

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

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

这是我和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,其中div的id将在调用.tooltip('destroy')时使用;或.tooltip ();

这使工具提示,把它放在任何javascript,包括在HTML文件。但是,可能没有必要添加这一行。(如果工具提示显示w/o这一行,那么就不要费心包括它)

$("#element_id").tooltip();

破坏工具提示,参见下面的用法。

$("#element_id").tooltip('destroy');

阻止按钮被点击。因为disabled属性没有被使用,这是必要的,否则按钮仍然是可点击的,即使它“看起来”好像被禁用了。

$("#element_id").click(
  function(evt){
    if ($(this).hasClass("btn-disabled")) {
      evt.preventDefault();
      return false;
    }
  });

使用引导,您可以使用类btn和btn-disabled。 在你自己的.css文件中重写这些。你可以添加任何颜色或任何你想要按钮在禁用时的样子。确保你保持光标:default;您还可以更改.btn。btn-成功看起来是这样的。

.btn.btn-disabled{
    cursor: default;
}

将下面的代码添加到控制按钮启用的javascript中。

$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');

工具提示现在只在按钮被禁用时显示。

如果你正在使用angularjs,如果需要的话,我也有一个解决方案。