Source:  Twitter logo

I am using mat-table to display records in Grid and using matTooltip to display the tooltip on mousehover.
I want to display the tooltip near mouse pointer or at starting position of the row.

But in my case, Tooltip always displays at the center of the row. I tried set position in css but no luck.

Can someone please help on this.

HTML:

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

CSS:

.row-tooltip {
      position: relative !important; 
      right: 30px !important;
      background-color: #fafafa; 
      font-size: 12px; 
}

From https://material.angular.io/components/tooltip/overview : "The tooltip will be displayed below the element but this can be configured using the matTooltipPosition input. The tooltip can be displayed above, below, left, or right of the element. By default the position will be below. If the tooltip should switch left/right positions in an RTL layout direction, then the positions before and after should be used instead of left and right, respectively."

So this will render the tooltip to the left of your rows:

<mat-row
  *matRowDef="let row; columns: mGridColumns;"
  (click)="onRowClick(mGridDataSource, row)"
  [matTooltip]="row.tooltipText"  [matTooltipPosition]="'left'">
</mat-row>
4 users liked answer #0dislike answer #04
ForestG profile pic
ForestG

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).