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，不会产生工具提示。

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

像这样：

<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();   
});

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

2 个答案: