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

I want to show the tooltip when I hover over the ahchor tag when the class="not-active" is in action.

所以，基本上，.not-active class 在变量 isCurrentUserExist 计算为 false，对吧？（这就是您的代码显示的内容）。

然后，你可以简单地在 [matTooltip] @Input:

中输入一个条件来实现它

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

编辑 1

为了更优雅的解决方案，我们可以使用matTooltipDisabled @Input（PR#3578 and released in @angular/components@2.0.0-beta.3 cesium-cephalopod中实现的）：

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

Answer 2

Material Angular 工具提示有一个名为 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

Angular Material 2 Md-ToolTip with show conditionally

html

css

angular-material2

angular