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

当我将鼠标悬停在ahchor标签上时，我想显示工具提示类=＆＃34;不活性＆＃34;正在行动。

所以，基本上，当变量 .not-active评估为 false 时，isCurrentUserExist类已启用，对吧？（那是你的代码所显示的内容）。

然后，您只需在[matTooltip] @Input 中添加条件即可实现：

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

Answer 2

“材质角工具提示”为此指定了一个名为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

Angular Material 2 Md-ToolTip有条件显示

2 个答案: