Angular Material 2 Md-ToolTip有条件显示

Question

我正在尝试使用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;
}

Answer 1

当class ="not-active"正在运行时,当我将鼠标悬停在ahchor标签上时,我想显示工具提示.

所以,基本上,.not-active当变量 isCurrentUserExist求值为false时启用该类,对吧？(这就是你的代码所显示的内容).

然后,你可以简单地在[matTooltip] @Input中添加一个条件:

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

Answer 2

我知道已经接受了一个答案,但是Material Angular Tooltip有一个名为matTooltipDisabled(类型boolean)的参数.它可以绑定到与绑定相同的元素matTooltip.

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

不要忘记声明变量并设置一个值;)

let hideTooltip:boolean = false;

您的示例:https://stackblitz.com/edit/angular-os6qow/

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