Set position of Angular Material Tooltip

user_3881070 0
Viewed 18223

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; 
}
angular-material angular css html
1 Answers

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