如何在禁用的MatFormField内的MatChips上触发MatTooltip？

当MatFormField关联的表单控件处于禁用状态时，Angular Material会默认屏蔽内部元素的交互事件，导致MatChip上的MatTooltip无法触发。以下是两种可行的解决方案：

方案1：强制启用Tooltip并恢复鼠标事件 #

直接修改模板，通过CSS强制chip接收鼠标事件，同时显式启用Tooltip：

<form [formGroup]="fruitsForm">
  <mat-form-field>
    <mat-chip-grid 
      #chipGrid aria-label="Enter fruits" 
      formControlName="fruits"
    >
      @for (fruit of fruits(); track fruit) {
      <mat-chip-row 
        style="pointer-events: auto !important;"
        [matTooltip]="fruit.name"
        [matTooltipDisabled]="false"
      >
        {{fruit.name}}
      </mat-chip-row>
      }
      <input ... />
    </mat-chip-grid>
  </mat-form-field>
</form>

关键说明： #

• pointer-events: auto !important：覆盖禁用元素默认的pointer-events: none，让chip能接收鼠标悬停事件
• [matTooltipDisabled]="false"：强制启用Tooltip，不受父控件禁用状态的影响

方案2：手动触发Tooltip事件 #

如果方案1不生效，可通过监听鼠标事件手动调用Tooltip的显示/隐藏方法：

组件代码： #

import { Component } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Component({
  selector: 'chips-input-example',
  templateUrl: 'chips-input-example.html',
})
export class ChipsInputExample {
  showTooltip(tooltip: MatTooltip) {
    tooltip.show();
  }

  hideTooltip(tooltip: MatTooltip) {
    tooltip.hide();
  }
}

模板修改： #

<form [formGroup]="fruitsForm">
  <mat-form-field>
    <mat-chip-grid 
      #chipGrid aria-label="Enter fruits" 
      formControlName="fruits"
    >
      @for (fruit of fruits(); track fruit) {
      <mat-chip-row 
        style="pointer-events: auto !important;"
        #tooltip="matTooltip"
        [matTooltip]="fruit.name"
        (mouseenter)="showTooltip(tooltip)"
        (mouseleave)="hideTooltip(tooltip)"
      >
        {{fruit.name}}
      </mat-chip-row>
      }
      <input ... />
    </mat-chip-grid>
  </mat-form-field>
</form>

关键说明： #

• 通过模板变量#tooltip="matTooltip"获取Tooltip实例
• 监听mouseenter和mouseleave事件，手动调用show()/hide()方法触发Tooltip

内容的提问来源于stack exchange，提问作者alessandro308