Angular Material 2 Md-ToolTip 有条件地显示

Posted 2023-03-05

【中文标题】Angular Material 2 Md-ToolTip 有条件地显示

【英文标题】：Angular Material 2 Md-ToolTip with show conditionally

【发布时间】：2017-07-04 22:58:45

【问题描述】：

我正在尝试使用 Angular Material 2 的 MdToolTip。语法看起来像

<span mdTooltip="Tooltip!">I have a tooltip</span>

但是，我想在我的锚标记上实现这个功能。我想在 class="not-active" 起作用时将鼠标悬停在 ahchor 标记上时显示工具提示。我怎样才能做到这一点？

<a [ngClass]="'not-active': !isCurrentUserExist" [routerLink]="['/create-timesheet']">Link1</a>


/*disabled side menu links*/
.not-active 
   pointer-events: none;
   cursor: default;

【参考方案1】：

当我将鼠标悬停在 ahchor 标签上时，我想显示工具提示 class="not-active" 正在起作用。

所以，基本上，.not-active 类在 变量 isCurrentUserExist 评估为 false 时启用，对吗？ （这就是您的代码所显示的内容）。

然后，您只需在[matTooltip] @Input中输入一个条件即可实现：

<span [matTooltip]="!isCurrentUserExist ? 'Tooltip!' : ''">
  I have a tooltip
</span>

---

编辑 1

对于更优雅的解决方案，我们可以使用matTooltipDisabled @Input（在PR#3578 中实现并在@angular/components@2.0.0-beta.3 cesium-cephalopod 中发布）：

<span matTooltip="Tooltip!" [matTooltipDisabled]="isCurrentUserExist">
  I have a tooltip
</span>

【讨论】：

嘿伙计。抱歉，我不知道为什么它之前显示错误。你怎么知道你可以用 [ ] 绑定 mdTooltip。这是否意味着几乎所有类似的财产？

没问题 :) 它叫做属性绑定。检查this。

我推荐@ErickXavier 的answer 和[matTooltipDisabled]。这是一个更优雅的解决方案。 :)

@biolauri 虽然我完全同意matTooltipDisabled 的使用更优雅，但我想指出matTooltipDisabled 是在PR#3578 中实现的，该PR#3578 发布于2017- 04-07，在 2.0.0-beta.3 cesium-cephalopod 版本中，这是，在我回答了这个问题之后，在 2017-02-16。

哦，听起来我的评论触到了痛处。对此感到抱歉。很高兴您对 Angular 的更新日志如此熟悉。为什么不考虑根据此更新您的答案？如果人们想知道这种情况何时发生变化以及目前最好的解决方案是什么（就像meta on this topic 中建议的那样），这对人们来说将是一个很好的知识。或者您可以自己添加提及，如meta on updates 中建议的那样。再说一次，我不想伤害你；只是改善答案。 :)

【参考方案2】：

Material Angular Tooltip 有一个名为 matTooltipDisabled（布尔类型）的参数。它可以绑定到与matTooltip 绑定的相同元素。

<span matTooltip="Tooltip!" [matTooltipDisabled]="hideTooltip == true">I have a tooltip</span>

别忘了声明变量并设置一个值；）

let hideTooltip:boolean = false;

因此，使用您自己的代码，更适合您的解决方案是：

<a matTooltip="Tooltip!" [matTooltipDisabled]="!isCurrentUserExist" [ngClass]="'not-active': !isCurrentUserExist" [routerLink]="['/create-timesheet']">Link1</a>

/*disabled side menu links*/
.not-active 
   pointer-events: none;
   cursor: default;

您的示例：https://stackblitz.com/edit/angular-conditional-tooltip

文档：https://material.angular.io/components/tooltip/overview#disabling-the-tooltip-from-showing