Angular Material - Mat-table row tooltip

Question

I am using Angular Material Mat-Table and I wanted to display a tool-tip during mousehover on any row. Based on row id , I need to match and filter data from mGridDataSource. I am new to Angular. Can someone please help me on this.

HTML file:

<mat-row *matRowDef="let row; columns: mGridColumns;"
     [ngClass]="{hovered: row.hovered, highlighted: row.highlighted}"
     (click)="onRowClick(mGridDataSource, row)"
     matTooltip = {{myToolTip}} (mouseover)="getToolTip(row); ">
</mat-row>

ts file:

getToolTip(row) {

this.matTooltip = '';
   }

What is the current behaviour? No tooltip at all, error, tooltip with no data? — Felix Lemke
@FelixLemke - If I assign any text to this.matTooltip, tooltip displays the data but as I mentioned, I need specific row's data from data source which matches row id. — Ask_SO

Felix Lemke Felix Lemke · Accepted Answer · 2020-04-02T12:25:51

You can access the rows attributes directly in the tooltip. Imagine you have the property tooltipText in your specific row data object row, then you can access this property directly in your template. There is no need to execute a function on mouseover to store the current tooltip inside a component variable.

<mat-row
  *matRowDef="let row; columns: mGridColumns;"
  (click)="onRowClick(mGridDataSource, row)"
  [matTooltip]="row.tooltipText">
</mat-row>

Angular Material - Mat-table row tooltip

1 Answers