Angular Material升级后MatTooltip外围激活区过大如何调整为0

问题根因 #

Angular Material 14.0.x 版本为matTooltip新增了**悬停公差（hoverTolerance）**的默认交互逻辑：为了避免用户鼠标轻微移动就意外触发tooltip隐藏，默认设置了5px的虚拟判定范围，也就是观察到的边界外约3mm的激活区。这个范围是JS逻辑层的判定阈值，不是真实DOM的盒模型属性，所以调整margin、padding等CSS属性完全不会生效。

修复方案 #

单元素级配置 #

如果只需要调整个别菜单项的tooltip行为，直接在绑定matTooltip的元素上添加matTooltipHoverTolerance输入属性，将值设为0即可完全取消外围激活区：

<!-- 紧凑菜单项示例 -->
<button 
  mat-menu-item
  matTooltip="操作提示"
  [matTooltipHoverTolerance]="0"
  [matTooltipHideDelay]="0">
  菜单操作
</button>

注：同步把matTooltipHideDelay设为0，可以保证光标移出后tooltip无延迟立即隐藏，完全匹配升级前的交互表现。

全局级配置 #

如果项目内所有tooltip都需要取消外围激活区，直接在根模块注入全局默认配置，无需逐个元素修改：

import { NgModule } from '@angular/core';
import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';

// 自定义tooltip全局默认配置
const customTooltipDefaults: MatTooltipDefaultOptions = {
  showDelay: 0,
  hideDelay: 0,
  touchendHideDelay: 1500,
  hoverTolerance: 0, // 核心配置：将悬停判定公差设为0，取消外围激活区
  disableTooltipInteractivity: true // 紧凑菜单场景推荐开启：禁止tooltip本身响应鼠标事件，避免光标滑到tooltip层上导致常驻遮挡
};

@NgModule({
  providers: [
    { provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: customTooltipDefaults }
  ]
})
export class AppModule {}

验证说明 #

配置完成后，鼠标光标移出绑定tooltip的目标元素边界后，tooltip会立即隐藏，不会再保留外围3mm的激活判定区，相邻的紧凑菜单项可以正常响应鼠标hover、点击事件，不会被常驻的tooltip遮挡。

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