angularjs - 如何在禁用按钮上显示 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

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

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

只有当变量 isDisabled 为 true 时，工具提示才会可见，这也会设置按钮的 disabled 状态。

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