MatTooltip does not display when used inside ngFor

Question

I am trying to display a list of cards that will update dynamically as the data in another service is updated. Each card should have a tool tip that displays the item's name when the user hovers over it.

Originally my code was as follows:

<div class="bankItemsContainer" fxLayout="row" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
    <div class="bankItem" *ngFor="let item of GetBankItems()">
        <mat-card class="card-picture" matTooltip="{{item.name}}">
            <mat-card-title fxLayout.gt-xs="row" fxLayout.xs="column">
                <mat-icon svgIcon="{{item.icon}}"></mat-icon>
            </mat-card-title>
            <mat-card-footer style="text-align: center;">{{ item.quantity }}</mat-card-footer>
        </mat-card>
    </div>
</div>

The issue is that the tooltip was not being shown when I hovered over the card.

After some research I was able to find out that calling a function doesn't work well with ngFor and thus causes issues for the matTooltip since the items are constantly being re rendered.

I then changed the ngFor to use the property from the service that need to access:

*ngFor="let item as playerService.playerSave.bank.items"

This did not fix it. I read that using an observable should help so I set up an observable around the value from the service.

ngOnInit(): void {
    this.bankItems$ = of(this.playerService.playerSave.bank.items);
  }

And changed the ngFor to:

*ngFor="let item of bankItems$ | async; let i=index"

Again the tooltip still doesn't show when I mouse over the card.

I feel like I have run out of things to try and I am not sure how to ultimately make this work.

Answer 1

I had a similar issue where my tooltips weren't showing up inside of an *ngFor loop but it turned out that I was using several functions within my template which caused a lot of re-rendering every time my mouse moved. Once I removed the functions and replaced with properties, it was resolved. This article explains more details about why you shouldn't use function calls in your angular template expressions.

Answer 2

I tried your code to replicate your issue. The issue is that you were missed the id attribute to the tooltip.

<mat-card class="card-picture" #tooltip="matTooltip" matTooltip="{{item.name}}">

I tried it as mentioned below.

<div class="bankItemsContainer" fxLayout="row" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
    <div class="bankItem" *ngFor="let item of GetBankItems()">
        <mat-card class="card-picture" #tooltip="matTooltip"
        matTooltip="{{item.name}}">
            <mat-card-title fxLayout.gt-xs="row" fxLayout.xs="column">
                <mat-icon svgIcon="{{item.icon}}"></mat-icon>
            </mat-card-title>
            <mat-card-footer style="text-align: center;">{{ item.quantity }}</mat-card-footer>
        </mat-card>
    </div>
</div>

I hope this will resolve your issue.