How to trigger MatTooltip on hover on MatChips inside a disabled MatFormField?

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/example/chips-input-example.html

Continue reading...