如何将工具提示添加到角度材质步进器

Question

我想在悬停时为每个步进添加工具提示。但是matTooltip似乎与mat-step不起作用。

<mat-horizontal-stepper #stepper>
<mat-step label="Home" matTooltip="Info about the Home">
</mat-step>
<mat-step label="Select" matTooltip="Info about the Select">
</mat-step>
<mat-step label="Graph" matTooltip="Info about the Graph">
</mat-step>
<mat-step label="Test" matTooltip="Info about the Test">
</mat-step>
</mat-horizontal-stepper>

Stacklitz演示

有什么办法让它发挥作用吗？如果不是material tooltip，还有其他选择吗？

Answer 1

在app.module.ts 中导入MatTooltipModule

并在导入部分写入MatTooltipModule。

import { MatToolbarModule, MatCardModule, MatStepperModule, MatButtonModule,MatTooltipModule } from '@angular/material';

将您的代码更改为低于

<mat-horizontal-stepper #stepper>
<mat-step>
<ng-template matStepLabel>
<div matTooltip="Info about the Home">Home
</div>
</ng-template>
</mat-step>
<mat-step>
<ng-template matStepLabel>
<div matTooltip="Info about the Select">Select
</div>
</ng-template>
</mat-step>
<mat-step>
<ng-template matStepLabel>
<div matTooltip="Info about the Graph">Graph
</div>
</ng-template>
</mat-step>

<mat-step>
<ng-template matStepLabel>
<div matTooltip="Info about the Test">Test
</div>
</ng-template>
</mat-step>

Answer 2

即使我也无法使用matTooltip显示工具提示。

我使用了ng2工具提示指令

但它只适用于标签，而不适用于步进器。

<mat-step  state="step">
<ng-template matStepLabel>
<div tooltip="Tooltip">Test</div>
</ng-template>
</mat-step>

Answer 3

我创建了一个鼠标悬停事件，使用matTooltip将我的值放入每个步进器中。当我激活鼠标时，我只返回名称。

HTML:

<mat-horizontal-stepper #stepper >
<ng-template matStepperIcon="edit" let-index="index">
<mat-icon (mouseover)="getTooltip(index)" [matTooltip]="mouseOverTooltip">create</mat-icon>
</ng-template>
<ng-template matStepperIcon="done" let-index="index">
<mat-icon (mouseover)="getTooltip(index)" [matTooltip]="mouseOverTooltip">done</mat-icon>
</ng-template>
<ng-template matStepperIcon="number" let-index="index">
<span (mouseover)="getTooltip(index)" [matTooltip]="mouseOverTooltip">{{index + 1}}</span>
</ng-template>
<!-- Your steppers  -->
<mat-step [editable]="true" >
<ng-template matStepLabel >
<div >
.
</div>
</ng-template>
</mat-step>
<!-- ... -->
</mat-horizontal-stepper>

JS::

getTooltip(index){
switch (index) {
case 0:
this.mouseOverTooltip =  'Tooltip1';
break
case 1:
this.mouseOverTooltip =  'Tooltip2';
break
case 2:
this.mouseOverTooltip =  'Tooltip3';
break
case 3:
this.mouseOverTooltip =  'Tooltip4';
break
case 4:
this.mouseOverTooltip =  'Tooltip5';
break
}
}