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>