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

试试这个例子:

工具提示必须使用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>

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

引导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>

只需覆盖css禁用悬停事件在你的元素

添加css:

pointer-events: all !important;
cursor: not-allowed !important;

这将禁用点击按钮，但仍将允许悬停事件使工具提示工作