您可以使用CSS3模仿这种效果。

只需将禁用状态从按钮上取下，工具提示就不再出现了。这对于验证非常有用，因为代码需要的逻辑更少。

我用这支笔来说明。

CSS3禁用工具提示

[disabled] {
  &[disabled-tooltip] {
    cursor:not-allowed;
    position: relative;
    &:hover {
      &:before {
        content:'';
        border:5px solid transparent;
        border-top:5px solid black;
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -5px));
      }
      &:after {
        content: attr(disabled-tooltip);
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -15px));
        width:280px;
        background-color:black;
        color:white;
        border-radius:5px;
        padding:8px 12px;
        white-space:normal;
        line-height:1;
      }
    }
  }
}

<button type="button" class="btn btn-primary" disabled-tooltip="I am a disabled tooltip using CSS3.. You can not click this button." disabled>Primary Button</button>

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

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

引导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来实现。“pointer-events”属性是阻止工具提示出现的原因。你可以通过覆盖bootstrap设置的"pointer-events"属性来让禁用按钮显示工具提示。

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

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

添加css:

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

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

这是我和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，如果需要的话，我也有一个解决方案。