如何根据角度 4 中的条件显示工具提示?

Question

例如，如果希望仅在禁用按钮或禁用输入框或任何 HTML 元素时才显示工具提示。

Answer 1

使用材质工具提示将是一个很好的建议，感觉你正在使用角度。 https://material.angular.io/components/tooltip/overview

要获得条件材质工具提示，您可以执行以下操作之一：

<div matTooltip="This is a tooltip"
[matTooltipDisabled]="condition">TOOL TIP TEST</div>

在matTooltipDisabled中放置工具提示何时禁用的条件的位置

或者你可以这样做(我更喜欢(：

<div [matTooltip]="condition ? 'This is a tooltip' : null">TOOL TIP TEST</div>

这里的逻辑是，如果满足条件，则显示字符串，否则显示 null，这不会生成工具提示。

我更喜欢上面的内容，因为如果您想要动态工具提示，或者如果有复杂的逻辑来确定是否应该显示工具提示，您甚至可以将其设置为一个函数，它将返回字符串或 null。

这样：

<div [matTooltip]="getToolTip()">TOOL TIP TEST</div>

最后一个选项为您提供较少的 html 代码，并允许您适当地对getToolTip()函数进行单元测试。

这是一个堆栈闪电战(我没有成功，只是找到了它(显示了第一个选项，但我真的认为如果条件逻辑有点复杂，那么使用我给出的第三个选项。

https://stackblitz.com/edit/angular-conditional-tooltip-lnf3x6?file=app%2Ftooltip-overview-example.html

但是，有一个重要的注意事项!! 它不适用于禁用的按钮。对禁用按钮的关注以不允许工具提示的方式处理。但这没关系，因为您可以使用工具提示在按钮周围有一个包装器div。相同的结果。

Answer 2

使用 [attr.title] 根据条件显示工具提示。

<span class="tool-tip" data-toggle="tooltip" data-placement="top" 
[attr.title]="Status == false? 'Fill the form to enable Download option' : 
null">
<button class="btn btn-primary" [disabled]="Status == false">Download</button>
</span>

在ngOninit((中添加下面的jQuery代码，这有助于显示工具提示。

$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();   
});