0

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?

Saad Hasan
  • 458
  • 5
  • 17

1 Answers1

2

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

Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
  • Some of the steps have long text label, and I want to display the tooltip for those labels. And I don't won't to let the user to control the stepper, steps are completed programmatically. – Saad Hasan Sep 02 '21 at 12:01
  • 1
    @SaadHasan understandable, in that case I think my proposed solution should work. I've updated it to make it complete – Poul Kruijt Sep 02 '21 at 12:20