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

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

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

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

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

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

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

如果您使用title属性而不是uib-tooltip

，此解决方案也将起作用

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

无论启用或禁用按钮，我都会收到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'
    });
}])