web-dev-qa-db-fra.com

Angular Material 2 Md-ToolTip with show conditionally

J'essaie d'utiliser Angular Material 2's MdToolTip . La syntaxe ressemble à

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

Cependant, je veux implémenter cette fonction sur ma balise d'ancrage. Je veux afficher l'info-bulle lorsque je survole la balise ahchor lorsque la classe = "non active" est en action. Comment pourrais-je y parvenir?

<a [ngClass]="{'not-active': !isCurrentUserExist}" [routerLink]="['/create-timesheet']">Link1</a>


/*disabled side menu links*/
.not-active {
   pointer-events: none;
   cursor: default;
}
htmlcssangularangular-material2
14
ErnieKev

Je veux afficher l'info-bulle lorsque je survole la balise ahchor lorsque la classe = "non active" est en action.

Donc, en gros, le .not-active la classe est activée lorsque la variableisCurrentUserExist est évaluée à false , non? (C'est ce que montre votre code).

Ensuite, vous pouvez y parvenir en mettant simplement une condition dans [matTooltip] @ Entrée :

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

Modifier 1

Pour une solution plus élégante, nous pouvons utiliser matTooltipDisabled@Input (lequel a été implémenté dans PR#3578 et publié en @angular/[email protected] cesium-cephalopod ):

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

Le Material Angular Tooltip a un paramètre appelé matTooltipDisabled (type booléen) fait pour cela. Il peut être lié au même élément que le matTooltip est lié .

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

N'oubliez pas de déclarer la variable et de définir une valeur;)

let hideTooltip:boolean = false;

Donc, en utilisant votre propre code, la meilleure solution pour vous serait:

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

Exemple pour vous: https://stackblitz.com/edit/angular-conditional-tooltip

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

13
ErickXavier