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

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

Solution 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

Comments

[ErnieKev]

Hey man. Sorry I dont know why it was showing an error before. How do you know you can bind mdTooltip with [ ]. Does that mean pretty much any property like that?

[developer033]

No problem :) It's called property binding. Check this.

[biolauri]

I'd recommend @ErickXavier's answer with [matTooltipDisabled]. That's a more elegant solution. :)

[developer033]

@biolauri While I totally agree that the use of matTooltipDisabled is more elegant, I want to point that the matTooltipDisabled was implemented in PR#3578, which was released on 2017-04-07, in version 2.0.0-beta.3 cesium-cephalopod, this is, AFTER I answered this question, on 2017-02-16.

[biolauri]

Oh, sounds like I hit a sore spot with my comment. Sorry for that. It's great that you're so familiar with the changelog of Angular. Why not consider updating your answer according to this? That'd be great knowledge for people if they're wondering on when this changed and what's the best solution as of now (like suggested in meta on this topic). Or you could've added the mention yourself, like suggested in meta on updates. Again, I don't want to harm you; just improve answers. :)

[developer033]

@biolauri Nah, don't worry, you didn't harm me :) Btw, I edited the answer. Check it, please. Thanks!

[biolauri]

Oh, great to see. Both! :)