如何为禁用状态的mat-tab内的mat-icon绑定matTooltip？

我之前也碰到过这个情况！问题出在当mat-tab被禁用时，Angular Material会自动给整个tab标签区域加上pointer-events: none的CSS样式——这就导致所有鼠标事件都无法传递到标签内的元素，包括你的mat-icon，所以tooltip自然触发不了。

而且你提到不能把mat-tab放进div里，那我们可以换个思路，直接让图标本身能接收鼠标事件就行，具体步骤如下：

1. 添加自定义CSS样式
   在你的组件样式文件（比如.component.css）里加上这段代码，强制让图标能响应鼠标事件：

   .tab-icon-tooltip {
     pointer-events: auto;
     cursor: help; /* 可选，让鼠标悬停时显示帮助指针，提升用户体验 */
   }
   

2. 修改模板代码
   给两个mat-icon都加上刚才定义的类：

   <mat-tab label="Tab 3" [disabled]="!picExist" >
     <ng-template mat-tab-label>
       <mat-icon *ngIf="picExist" class="tab-icon-tooltip" matTooltip="See Pictures">photo_camera</mat-icon>
       <mat-icon *ngIf="!picExist" class="tab-icon-tooltip" matTooltip="No picture!">add_a_photo</mat-icon>
     </ng-template>
     <!-- 这里放tab的内容 -->
   </mat-tab>
   

原理很简单：pointer-events: auto会覆盖父元素（禁用的mat-tab标签）的pointer-events: none设置，这样图标就能正常接收hover事件，tooltip也就可以正常显示了。我自己用这个方法解决了同样的问题，你可以试试！

内容的提问来源于stack exchange，提问作者Marie-Hélène Delteil