如果你(像我一样)迫切需要复选框、文本框之类的工具提示，那么这里是我的破解方法:

$('input:disabled, button:disabled').after(function (e) {
    d = $("<div>");
    i = $(this);
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "absolute",
    })
    d.css(i.offset());
    d.attr("title", i.attr("title"));
    d.tooltip();
    return d;
});

工作示例:http://jsfiddle.net/WB6bM/11/

无论如何，我相信禁用表单元素的工具提示对用户体验非常重要。如果你阻止某人做某事，你应该告诉他们原因。

试试这个例子:

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

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

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

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

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

<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

您可以使用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>