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>

Stackblitz Demo

有什么办法可以使它工作？如果不是material tooltip，还有其他选择吗？

Answer 1

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

我使用了ng2-tooltip-directive

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

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

Answer 2

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

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

3 个答案: