Angular Material设置matTooltipClass后提示文本快速消失问题

使用Angular Material的matTooltip组件时，通过matTooltipClass="tooltip"绑定自定义样式类修改提示默认字体大小，样式生效后出现异常：鼠标悬停触发提示后，文本仅显示约0.5秒就立刻消失，无法保持正常显示状态。
涉及的HTML代码：

<mat-form-field appearance="fill">
    <mat-label>Grasp of the subject matter</mat-label>
    <mat-select [(ngModel)]="selectedValueRubric1" name="criterian1" required>
      <mat-option
        *ngFor="let rubric of criterian1"
        matTooltip="{{ rubric.criteria }}"
        matTooltipClass="tooltip"
        [value]="rubric"
      >
        {{ rubric.criteria }}
      </mat-option>
    </mat-select>
</mat-form-field>

原有SCSS样式代码：

.mat-tooltip.tooltip {
  font-size: 20px;
}

预期效果：matTooltip提示文本可以正常持续显示，直到鼠标移出触发元素，恢复组件默认的悬停显示行为。

• Angular默认启用视图封装机制，写在业务组件局部SCSS中的自定义tooltip样式，会被自动追加组件专属属性选择器，干扰Angular Material对tooltip浮层的尺寸、位置计算逻辑，导致浮层判定模块误判鼠标已离开触发区域，提前触发隐藏逻辑。
• 局部样式穿透时容易意外覆盖tooltip默认的pointer-events: none属性，导致tooltip浮层本身拦截鼠标事件，触发组件的失焦隐藏规则。

二选一即可：

• 方案1（推荐）：将自定义tooltip样式迁移到项目全局样式文件（默认为src/styles.scss），脱离组件视图封装的影响，不需要修改原有样式逻辑：

.mat-tooltip.tooltip {
  font-size: 20px;
}

• 方案2：保留样式在组件局部SCSS中，使用::ng-deep穿透视图封装，同时显式声明pointer-events: none避免事件拦截，通过:host控制样式作用域避免全局污染：

:host ::ng-deep .mat-tooltip.tooltip {
  font-size: 20px;
  pointer-events: none;
}

注意：自定义tooltip样式不要额外添加会改变元素定位、偏移量的属性（如自定义margin、transform偏移、position定位规则），否则会导致CDK浮层位置计算出错，同样会引发提示提前消失、位置错位的问题。

调整后鼠标悬停在选项上时，tooltip会保持正常显示，直到鼠标移出触发元素才会隐藏，字体大小按自定义规则生效，和组件默认的悬停交互行为完全一致。

内容的提问来源于stack exchange，提问作者Felix Daniel Hervias Arancibia