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>