I’m struggling to find a solution here. Basically I have a disabled FormField that is composed by a series of MatChips, each of them with a specific tooltip.

Most of the solutions that I find online suggest to move the tooltip in an outer div, that is impossible for me since I need to add them in an NgFor inside the disabled FormField.

In code:

<form [formGroup]="fruitsForm">
  <mat-form-field>
    <mat-chip-grid 
      #chipGrid aria-label="Enter fruits" 
      formControlName="fruits" <!-- This is the disabled formField in my scenario -->
   >
      @for (fruit of fruits(); track fruit) {
      <mat-chip-row>
        <div [matTooltip]="fruit.name">{{fruit.name}}</div>
      </mat-chip-row>
      }
      <input
        ...
      />
    </mat-chip-grid>
  </mat-form-field>
</form>

How would you approach the issue? What can I do to have the tooltip triggered even on a disabled chips that are disabled by the outer formfield?

A complete working example can be found here: https://stackblitz.com/edit/c2pken?file=src%2Fexample%2Fchips-input-example.html