Angular Material 2 Md-ToolTip with show conditionally

Question

I am trying to use Angular Material 2's MdToolTip. The syntax looks like

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

However, I want to implement this function on my anchor tag. I want to show the tooltip when I hover over the ahchor tag when the class="not-active" is in action. How could I achieve this?

<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.

So, basically, the .not-active class is enabled when the variable isCurrentUserExist evaluates to false, right? (That's what your code is showing).

Then, you can achieve it simply putting a condition in [matTooltip] @Input:

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

---

Edit 1

For a more elegant solution, we can use matTooltipDisabled @Input (which one was implemented in PR#3578 and released in @angular/[email protected] cesium-cephalopod):

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

Answer 2

The Material Angular Tooltip has a parameter called matTooltipDisabled (type boolean) made for that. It can be bound to the same element as the matTooltip is being bound.

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

Don't forget to declare the variable and set a value ;)

let hideTooltip:boolean = false; 

So, using your own code, the better solution for you would be:

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

Example for you: https://stackblitz.com/edit/angular-conditional-tooltip

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