Angular Material - 如何在禁用步进时显示 angular 步进器的 matTooltip

Question

我有一个 Angular 水平步进器，它在 css 中被禁用，我想显示工具提示。由于禁用了 css 代码，这不会起作用。

// .ts file:
<mat-horizontal-stepper labelPosition="bottom" #stepper>
  <mat-step
    editable="false">
    <ng-template matStepLabel>
      <span matTooltip="'test11111'">test1</span>
    </ng-template>
  </mat-step>
</mat-horizontal-stepper>

// .scss file
:host ::ng-deep .mat-horizontal-stepper-header-container {
    pointer-events: none;
    cursor: not-allowed;
}

如何在禁用步骤的情况下显示工具提示？

Answer 1

为什么允许在禁用的东西上显示工具提示？如果你想要整个装订器的工具提示，你可以将它包装在一个元素中并在那里添加工具提示。如果你真的想要步骤跨度上的工具提示，你需要更改样式以再次触发指针事件。

还有一些样式可以禁用悬停效果和事件侦听器以防止点击和禁用波纹效果。

样式：

:host ::ng-deep .mat-horizontal-stepper-header-container {
  pointer-events: none;
  cursor: not-allowed;
   
  .mat-step-header:hover {
    background: inherit;
  }  

  .mat-tooltip-trigger {
    pointer-events: auto;
    cursor: initial;
  }
}

模板：

<mat-horizontal-stepper labelPosition="bottom" #stepper>
  <mat-step
    editable="false">
    <ng-template matStepLabel>
      <span 
        (click)="$event.stopPropagation()" 
        (mousedown)="$event.stopPropagation() 
        matTooltip="'test11111'">
        test1
      </span>
    </ng-template>
  </mat-step>
</mat-horizontal-stepper>

working stackblitz

Angular Material - 如何在禁用步进时显示 angular 步进器的 matTooltip

Angular Material - How to display matTooltip for angular stepper when the steps are disabled

angular-material

angular

angular-material-stepper