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

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

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

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

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

试试这个例子:

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

在我的案例中，以上的解决方案都不起作用。我发现使用绝对元素更容易重叠禁用按钮，如下:

<div rel="tooltip" title="I workz" class="wrap">
  <div class="overlap"></div>
  <button>I workz</button>
</div>

<div rel="tooltip" title="Boo!!" class="wrap poptooltip">
  <div class="overlap"></div>
  <button disabled>I workz disabled</button>
</div>

.wrap {
  display: inline-block;
  position: relative;
}

.overlap {
  display: none
}

.poptooltip .overlap {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

Demo