matToolTip Not working in Angular mat-table

Issue

I am using Angular with Angular Material 16x. matToolTip does not show at all. I have tried many versions of the below, including a simple matTooltip="hello world", but can't get it working. I did read where you can't place a matTooltip inside of an ng-container, but then see examples of it. Any idea what is wrong?

--my component
<mat-card class="mat-form-field">
    <mat-card-content>
        <table
          style="width: 100%"
          mat-table
          matSort
          matSortActive="created"
          matSortDisableClear
          matSortDirection="asc"
          [dataSource]="dataSource"
          multiTemplateDataRows="true"
        >

<ng-container matColumnDef="statusDot">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
        <img
            src="../../../assets/images/Basic_green_dot.png"
            alt=""
            matTooltip="tooltipTpl"
            style="width: 15px; height: 15px"
        />
    </td>
</ng-container>

<ng-template #tooltipTpl>
    <div style="background: gray">
    <div>This is a template!</div>
    </div>
</ng-template>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

<mat-paginator [pageSizeOptions]="[10, 25, 100, 1000]"></mat-paginator>
</mat-card-content>
</mat-card>

Solution

If you check the official documentation it tells us that the input expected is of type string, so mat-tooltip has no support for templates. We can only provide tooltip messages as string.

@Input('matTooltip') message: string

The message to be displayed in the tooltip

So you can just pass a string instead!

css

.custom-tooltip-class .mdc-tooltip__surface {
  background: red !important;
}

html

...
<img
                src="https://placehold.co/600x400"
                alt=""
                matTooltip="This is a template!"
                matTooltipClass="custom-tooltip-class"
                style="width: 15px; height: 15px"
            />
...

stackblitz

Answered By - Naren Murali