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

Question

I have an Angular horizontal stepper, that is disabled in the css and I want to display the tooltip. This is not going to work because of the disabled css code.

// .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;
}

How can the tooltip be displayed with disabled step?

Answer 1

Why would you allow a tooltip on a disabled thing? If you want a tooltip on the entire stapper, you can wrap it in an element and add the tooltip there. If you really want the tooltip on the span of the step, you need to change a styling to trigger the pointer events again.

And some more styling to disable the hover effect and event listeners to prevent clicking and to disable the ripple effect.

Styling:

: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;
  }
}

Template:

<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