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

试试这个例子:

工具提示必须使用jQuery初始化:选择指定的元素并调用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>

下面是一些工作代码: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属性。

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

你可以包装禁用按钮，并将工具提示放在包装器上:

<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)一起工作。感谢@JohnLehmann建议指针事件:没有;为禁用按钮。

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

引导3

HTML

<button 
    class="btn btn-success" 
    disabled
    data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Submit button
</button>

CSS

button { position:relative; }

.sp-btn-overlap { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background:none; 
    border:none; 
    z-index:1900;
}

JS

$('button .sp-btn-overlap')
    .popover({
        trigger: 'hover',
        container: 'body',
        placement: 'bottom',
        content: function() {
            return $(this).parent().prop('disabled')
                    ? $(this).data('hint')
                    : $(this).parent().data('hint');
            }
        });

$('button .sp-btn-overlap') .popover({ trigger: 'hover', container: 'body', placement: 'bottom', content: function() { return $(this).parent().prop('disabled') ? $(this).data('hint') : $(this).parent().data('hint'); } }); button { position:relative; /* important! */ } .sp-btn-overlap { position:absolute; top:0; left:0; height:100%; width:100%; background:none; border:none; z-index:1900; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <button disabled class="btn btn-default" data-hint="Enabled"> <div class="sp-btn-overlap" data-hint="Disabled"></div> Disabled button </button> <button class="btn btn-default" data-hint="Enabled"> <div class="sp-btn-overlap" data-hint="Disabled"></div> Enabled button </button>