Angular Material - Mat-table row tooltip

user_3881070 0
Viewed 7279

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 = '';
   }
angular-material angular typescript
1 Answers

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>
user_88084960
Related