how to add tooltip to child elements of mat stepper angular 6 without using 'matStepLabel'

On Hovering 1,2,3. I want to show tooltip

I want to add toottip to the stepper for example

header is like

1 2 3 4

I want on hovering 1 title related to first should be visible and on hovering 2 title related to second should be visible and so on..

HTML CODE:

<mat-horizontal-stepper  (mouseover)="showAllTooltips($event)"[linear]="true" #stepper class="learning-module">

<ng-template   *ngFor="let item of items" matStepperIcon="edit" let-index="index"  >
                    <span *ngIf="index===0"matTooltip="{{item.comment1}}">{{index+1}} </span>
                     <span *ngIf="index===1"matTooltip="{{item.comment2}}">{{index+1}} </span>
                     <span *ngIf="index===2"matTooltip="{{item.comment3}}">{{index+1}} </span>
                     <span *ngIf="index===3"matTooltip="{{item.comment4}}">{{index+1}} </span>
                     <span *ngIf="index===4"matTooltip="{{item.comment4}}">{{index+1}} </span>

</ng-template>'



 Typescript:  
    ' showAllTooltips(event) {
        this.show = !this.show;
        if (this.show) {
          setTimeout(() => {
            this.tooltips._results.forEach(item => item.show())
          }, 5)}
        // } else {
        //     this.tooltips._results.forEach(item => item.hide());
        // }
      }

      items = [
      { comment1: "List the elements  " }, 
      { comment2: "xyz" }, 
      { comment3: "abc" },
      { comment4: "efg" },
      { comment5: "hij" }
    ]