Angular Material 禁用mat-step步进器时如何正常显示matTooltip

你给.mat-horizontal-stepper-header-container设置了pointer-events: none属性，该属性会让当前元素以及所有子元素完全屏蔽所有鼠标交互事件，而matTooltip依赖鼠标移入事件触发，因此提示无法正常弹出。

修改SCSS样式规则，不要给整个容器设置pointer-events: none，仅拦截步进器头部的点击交互区域，单独放开标签区域的鼠标事件权限即可：

:host ::ng-deep .mat-horizontal-stepper-header-container {
    cursor: not-allowed;
}
/* 仅禁用步进器头部的点击响应 */
:host ::ng-deep .mat-horizontal-stepper-header {
    pointer-events: none;
}
/* 放开标签区域的鼠标事件，保证tooltip可触发 */
:host ::ng-deep .mat-step-label {
    pointer-events: auto;
}

修改后既可以保留步进器的禁用状态（用户无法点击切换步骤、光标显示为禁用样式），也可以正常触发标签上的matTooltip提示。

如果不想使用::ng-deep语法，你可以给步进器添加自定义类名，将上述样式写到全局样式文件中，匹配对应的自定义类即可，效果完全一致。

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