Tec*_*ner 7 html css angular-material angular
我使用 mat-table 在网格中显示记录,并使用 matTooltip 在鼠标悬停时显示工具提示。
我想在鼠标指针附近或行的起始位置显示工具提示。
但就我而言,工具提示始终显示在行的中心。我尝试在 css 中设置位置,但没有成功。
有人可以帮忙解决这个问题吗?
HTML:
<mat-row
*matRowDef="let row; columns: mGridColumns;"
(click)="onRowClick(mGridDataSource, row)"
[matTooltip]="row.tooltipText" [matTooltipClass]="'row-tooltip'">
</mat-row>
Run Code Online (Sandbox Code Playgroud)
CSS:
.row-tooltip {
position: relative !important;
right: 30px !important;
background-color: #fafafa;
font-size: 12px;
}
Run Code Online (Sandbox Code Playgroud)
For*_*stG 11
来自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>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
35354 次 |
| 最近记录: |