我在动态控件上也有同样的问题，所以我只是简单地这样做，设置样式属性并启用只读属性= true，当我们需要禁用元素时，但如果用户单击输入按钮控件，则显示工具提示。

是禁用停止所有事件功能，如ObBlur, onClick /OnFocus。代替下面的线:

((document.getElmentByName (MYINPUTBTN) .item(0)))。禁用= true。

我们可以通过下面的代码，工具提示将在禁用输入按钮元素中启用。

（（document.getElmentByName（'MYINPUTBTN'）.item（0）））.setAttribute（“style”， “background-color”： #e9ecef;“）;

b

希望这能解决这个问题。

这些变通办法是丑陋的。我已经调试的问题是，引导自动设置CSS属性指针事件:无禁用元素。

这个神奇的属性导致JS无法处理与CSS选择器匹配的元素上的任何事件。

如果你将这个属性重写为默认属性，所有的东西都会像魔法一样工作，包括工具提示!

.disabled {
  pointer-events: all !important;
}

然而，你不应该使用这种通用的选择器，因为你可能不得不手动停止JavaScript事件传播的方式，你知道的(e.c preventdefault())。

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

<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

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

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

pointer-events:汽车;在<input type="text" />上无效。

我采取了不同的方法。我没有禁用输入字段，但使其作为通过css和javascript禁用。

因为输入字段没有被禁用，所以工具提示显示正常。在我的情况下，如果输入字段被禁用，这比添加包装器要简单得多。

$(document).ready(function () { $('.disabled[data-toggle="tooltip"]').tooltip(); $('.disabled').mousedown(function(event){ event.stopImmediatePropagation(); return false; }); }); input[type=text].disabled{ cursor: default; margin-top: 40px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <input type="text" name="my_field" value="100" class="disabled" list="values_z1" data-toggle="tooltip" data-placement="top" title="this is 10*10">

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