Angularjs 如何在禁用按钮上显示ui引导工具提示？

在这里发布之前，我搜索了又搜索，找到了几种将工具提示应用于禁用按钮的解决方案，无论如何，这些解决方案都没有使用来自的

uib工具提示

以下是我的按钮代码：

<button class="btn btn-default"
        uib-tooltip="My tooltip text"
        tooltip-append-to-body="true"
        ng-disabled="!isAllSelected"
        ng-click="doThat()">Click Here
</button>

点击这里

您知道如何使工具提示即使在按钮被禁用时也可以显示吗？
无论按钮被启用还是禁用，我都会得到uib工具提示。下面的代码对我来说很好

<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" ng-disabled = "true" uib-tooltip="After today restriction" >Min date</button>

我认为不可能在按钮上实现，但如果您使用伪装成按钮的链接，而不是按钮，则它会起作用：

<a class="btn btn-default"
   uib-tooltip="My tooltip text"
   tooltip-append-to-body="true"
   ng-disabled="!isAllSelected"
   ng-click="doThat()">Click Here
</a>

点击这里
最简单、侵入性最小的解决方案是：

<a class="btn btn-default"
    uib-tooltip="My tooltip text"
    tooltip-append-to-body="true"
    ng-disabled="!isAllSelected"
    ng-click="isAllSelected ? doThat() : null">Click Here
</a>

点击这里

（注意有条件的
ng点击
，没有点击，即使锚点被“禁用”-即锚点不支持禁用属性），点击仍然会通过）
我知道这个问题已经存在好几年了，但是有人可能会发现这个解决方法很有用

我所做的是将按钮内容包装在
标记中，并对其应用uib工具提示：

<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true">
    <span uib-tooltip="Tooltip text" tooltip-append-to-body="true"> Button text<span>
</button>


按钮文本

如果您还需要在用户将鼠标悬停在整个按钮区域上时显示工具提示，您也可以删除按钮填充并将其添加到
中

<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true" style="padding: 0px !important;">
    <span uib-tooltip="Tooltip text" tooltip-append-to-body="true" style="display:inline-block; padding: 5px 10px;"> Button text<span>
</button> 


按钮文本
类似于janosch的解决方案-将按钮包装在具有tooltip属性的div中

<div uib-tooltip="{{ isDisabled ? 'Button is disabled' : '' }}">
   <button disabled="isDisabled">Button</button>
</div>


按钮

工具提示仅在变量
isDisabled
为true时可见，该变量还设置按钮的
disabled
状态

如果您使用的是
title
属性而不是
uib工具提示
，则此解决方案也会起作用。我认为，如果按钮被禁用，则不会触发任何事件。更好的方法是通过添加类使用CSS禁用按钮。您应该将按钮包装到元素中。之后，您可以激活元素的工具提示。Ehm。。。我尝试了你的代码，但是你禁用的按钮上没有显示工具提示。你使用的是angular.js、boostrap.css和angularanimate.js的哪个版本？什么browswer？我在试你的plunker例子。禁用按钮上没有工具提示。添加了供参考的屏幕截图。我正在使用FF 44.02，它正在工作。对我来说，它在chrome中也不起作用。我不知道为什么。可能有一些问题在这种情况下，您在视图中引入了一些逻辑，而这对于MVC应用程序来说是错误的方法。只是说明了对条件的需要-放在
dot中很简单，但它的缺点是，非输入或非按钮元素（如标记）不关心禁用的属性，并且将仍然可以单击。请确保禁用指针事件，如本答案中所示。否则，工具提示将无法正常工作：
<div uib-tooltip="{{ isDisabled ? 'Button is disabled' : '' }}">
   <button disabled="isDisabled">Button</button>
</div>