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

Posted 2023-02-22

【中文标题】如何在禁用按钮上显示 ui-bootstrap 工具提示？

【英文标题】：How to display ui-boostrap tooltip on disabled button?

【发布时间】：2016-06-15 03:20:27

【问题描述】：

在这里发布之前，我进行了搜索和搜索，发现了几种将工具提示应用于禁用按钮的解决方案，无论如何这些都没有使用来自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>

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

【问题讨论】：

我认为它不会像按钮被禁用一样工作，不会触发任何事件。更好的是通过添加类来使用 CSS 禁用按钮。

您应该将按钮包装到一个元素中。之后，您可以激活元素的工具提示。

【参考方案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'
    );
])

【讨论】：

Ehm...我尝试了您的代码，但您的禁用按钮上没有显示任何工具提示。

您使用的是哪个版本的 angular.js、boostrap.css 和 angularanimate.js？什么浏览器？

我正在尝试您的 plunker 示例。禁用按钮上没有工具提示。

添加截图供您参考

我正在使用 FF 44.02，它正在工作。它也不适用于我的 chrome。我不确定为什么。可能有一些问题

【参考方案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>

【讨论】：

这样做的缺点是，像 标签这样的非输入或非按钮元素不关心 disabled 属性，仍然可以点击。

如果您这样做，正如第一条评论所说，以及另一个答案，您需要在 ngClick 中添加一个条件，例如 ng-click="isAllSelected && doThat()"

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

【讨论】：

这样你在视图中引入了一些逻辑，这是 MVC 应用程序的错误方法。

只是说明了条件的必要性 - 放在doThat中是微不足道的

【参考方案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> 

【参考方案5】：

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

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

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

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

【讨论】：

确保禁用指针事件，如本答案所示。否则工具提示将无法正常工作：***.com/a/40147917/2698694