Angular Material - 如何在禁用步骤时显示角度步进器的 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