设置角度材质工具提示的位置

Question

我使用 mat-table 在网格中显示记录，并使用 matTooltip 在鼠标悬停时显示工具提示。

我想在鼠标指针附近或行的起始位置显示工具提示。

但就我而言，工具提示始终显示在行的中心。我尝试在 css 中设置位置，但没有成功。

有人可以帮忙解决这个问题吗？

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 输入进行配置。工具提示可以显示在元素的上方、下方、左侧或右侧元素。默认情况下，位置将在下方。如果工具提示应在 RTL 布局方向上切换左/右位置，则应分别使用之前和之后的位置，而不是分别使用左侧和右侧。&nbsp;”因此，这会将工具提示呈现在行的左侧：<mat-row&nbsp; *matRowDef="let row; columns: mGridColumns;"&nbsp; (click)="onRowClick(mGridDataSource, row)"&nbsp; [matTooltip]="row.tooltipText"&nbsp; [matTooltipPosition]="'left'"></mat-row>