Angular开发中如何关闭a标签悬停时默认弹出的tooltip？

问题场景 #

在Angular中开发MenuItem组件时，初始采用图标与a标签嵌套的实现，代码如下：

<a routerLinkActive="active">
  <my-icon name="{{ iconName }}"></my-icon>
  <a routerLink="{{ routerLink }}">{{ title }}</a>
</a>

组件基础路由跳转、激活态样式功能正常，但鼠标悬停在菜单项上时，会自动弹出显示a标签内容的原生tooltip，需要关闭该默认提示。

解决步骤 #

1. 先修正HTML结构错误
   HTML规范明确禁止a标签这类交互式元素互相嵌套，当前写法本身就不符合标准，是触发异常默认行为的常见原因。不要嵌套两层a标签，把routerLink和routerLinkActive绑定到同一个外层a标签上，内部文本用普通span标签包裹即可，修正后基础结构：

   <a 
     routerLink="{{ routerLink }}"
     routerLinkActive="active"
     class="menu-item"
   >
     <my-icon name="{{ iconName }}"></my-icon>
     <span class="menu-title">{{ title }}</span>
   </a>
   

2. 针对性处理tooltip提示
   浏览器原生tooltip只会在元素设置了title属性时触发，根据业务需求选对应方案即可：

   • 如果不需要title属性：直接检查模板代码，删掉a标签上的title属性绑定或静态属性，没有title属性就不会弹出原生提示。
   • 如果业务要求必须保留title属性（比如给读屏设备提供语义信息），可以通过事件拦截的方式禁用悬停提示：
     先在组件类中添加暂存title值的逻辑：

     private cacheTitle = '';
     // 鼠标移入时临时移除title属性
     onMouseEnter(e: MouseEvent, originTitle: string) {
       const target = e.currentTarget as HTMLElement;
       this.cacheTitle = originTitle;
       target.removeAttribute('title');
     }
     // 鼠标移出时还原title属性
     onMouseLeave(e: MouseEvent) {
       const target = e.currentTarget as HTMLElement;
       target.setAttribute('title', this.cacheTitle);
     }
     

     再给a标签绑定对应事件：

     <a 
       routerLink="{{ routerLink }}"
       routerLinkActive="active"
       [title]="title"
       (mouseenter)="onMouseEnter($event, title)"
       (mouseleave)="onMouseLeave($event)"
     >
       <my-icon name="{{ iconName }}"></my-icon>
       <span>{{ title }}</span>
     </a>
     

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