Angular Material 2 Md-ToolTip with show conditionally

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


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>