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

Question

在这里发帖之前,我找啊找,我发现了几个解决方案,应用工具提示禁用的按钮,反正这些都不是用uib-tooltip从角UI引导.

这是我按钮的代码:

<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

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

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

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

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

Answer 2

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

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

请看这个笨蛋

添加了工具提示的屏幕截图

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

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