Question

我正在使用mat-table在Grid中显示记录，并使用matTooltip在mousehover上显示工具提示。
我想在鼠标指针附近或该行的开始位置显示工具提示。

但是对于我来说，工具提示始终显示在行的中心。我尝试在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布局方向上切换左/右位置，则应分别使用之前和之后的位置，而不要使用左右。“

因此，这会将工具提示显示在行的左侧：

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

设定角度材料工具提示的位置

1 个答案: