設置 position 的 Angular 材料工具提示

Question

我正在使用 mat-table 在 Grid 中顯示記錄，並使用 matTooltip 在鼠標懸停時顯示工具提示。
我想在鼠標指針附近或開始行的 position 時顯示工具提示。

但就我而言，工具提示始終顯示在行的中心。 我嘗試在 css 中設置 position 但沒有運氣。

有人可以幫忙嗎？

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

Answer 1

來自https://material.angular.io/components/tooltip/overview ：“工具提示將顯示在元素下方，但這可以使用 matTooltipPosition 輸入進行配置。工具提示可以顯示在元素的上方、下方、左側或右側元素。默認情況下 position 將在下方。如果工具提示應在 RTL 布局方向上切換左/右位置，則應分別使用前后位置而不是左右位置。 "

因此，這會將工具提示呈現在行的左側：

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