如何在禁用按钮上显示 ui-bootstrap 工具提示？

Question

在这里发布之前，我进行了搜索和搜索，发现了几种将工具提示应用于禁用按钮的解决方案，无论如何这些都没有使用来自angular ui bootstrap 的uib-tooltip。

这是我的按钮的代码：

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

你知道如何让工具提示在按钮被禁用的情况下也可以显示吗？

Answer 1

无论按钮是启用还是禁用，我都会得到 uib 工具提示。下面的代码对我来说工作正常。

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

请看这个plunker

增加了工具提示的截图

补充说明：您还可以配置工具提示的位置。您需要做的就是得到$uibTooltipProvider 的帮助。然后我们可以使用 config 部分来实现结果。以下代码包含在 plunker 中。

angular.module('ui.bootstrap.demo')
.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
    $uibTooltipProvider.options({
        'placement':'bottom'
    });
}])

Answer 2

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

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

Answer 3

对此最简单、干扰最小的解决方案是：

<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-click，没有它，即使锚点被“禁用”，点击仍然会通过 - 即锚点不支持禁用属性）

Answer 4

我知道这个问题已经有好几年了，但是有人可能会发现这个解决方法很有用。

我所做的是将按钮内容包装在 <span> 标记中并将 uib-tooltip 应用到它：

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

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

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

Answer 5

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

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

工具提示仅在变量isDisabled 为真时可见，这也设置了按钮的disabled 状态。

如果您使用title 属性而不是uib-tooltip，此解决方案也可以使用