show/hide toggle in Angular-CodePudding

I have 4 cards in my html page,i need to show mattoolitip on click function to show/hide mattooltip in Angular . I was calling same method in all tooltip but for all it is displaying the first mattooltip data only.

app.component.html:

<div >
<div 
                     matTooltip="Here you can see the one"
                     matTooltipPosition="above" (click)="toggleShowTooltip()">
                  <i  ></i>
                </div> 
 </div> 
 <div >
 <div 
                     matTooltip="Here you can see the two"
                     matTooltipPosition="above" (click)="toggleShowTooltip()">
                  <i  ></i>
                </div> 
 </div> 
 <div >
 <div 
                     matTooltip="Here you can see the three"
                     matTooltipPosition="above" (click)="toggleShowTooltip()">
                  <i  ></i>
                </div> 
 </div> 
 <div >
 <div 
                     matTooltip="Here you can see the four"
                     matTooltipPosition="above" (click)="toggleShowTooltip()">
                  <i  ></i>
                </div> 
 </div>

app.component.ts:

  @ViewChild(MatTooltip) tooltip: MatTooltip;
   toggleShowTooltip(): void {
   this.tooltip.show();
   }

Thanks.

CodePudding user response：

You can't use ViewChild in this case because it is not as you expected, also there are 4 tooltips.

Easier way is to use the Angular Template References.

    <div #tooltip="matTooltip" matTooltip="Text here" (click)="tooltip.toggle()">
       <i ></i>
    </div>

Also, you can call a method and pass the reference to it and from TS just call the toggle or any other further actions, like (click)="toggleShowTooltip(tooltip)" and in the code add the param and its type in order to use it.

Further reference/example in doc: https://material.angular.io/components/tooltip/examples#tooltip-manual