CODEWITHSUNDEEP
htmlcssangularangular-material
Tech Learner
Tech Learner

Reputation: 1317

Set position of Angular Material Tooltip

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; 
}

Upvotes: 11

Views: 41919

Answers (1)

ForestG
ForestG

Reputation: 18085

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>

Upvotes: 14

Related Questions