如何在Safari中隐藏浏览器默认提示框（Tooltip），仅保留自定义的MatTooltip？

嘿，我之前在Safari里用Angular的MatTooltip时也碰到过这个双提示框的问题，特别烦人！别担心，这个问题有几个简单的解决办法，帮你只保留自定义的MatTooltip：

首先得说下原因：Safari会自动读取元素的title属性来显示默认提示框——哪怕你没手动写这个属性，有时候组件渲染的细节也可能触发它，刚好就和我们的MatTooltip撞车了。

给你两个靠谱的解决思路：

• 方法一：添加空的title属性绑定（首推）
  直接在你的div标签里加上[title]="''"，这样Safari读取到空的title值，就不会弹出默认提示框了，而且完全不会影响MatTooltip的正常工作。修改后的代码如下：

  <div  
    [attr.id]="'nodeRow-'+node.id" 
    [ngClass]="selectedID===node.id?'node-title-active':'node-title-inactive'" 
    class="row node-title" 
    (mouseenter)="overlayEffecton(node)" 
    (mouseleave)="overlayEffectoff(node)" 
    matTooltip="{{node.name}}" 
    matTooltipPosition="right" 
    matTooltipHideDelay="3" 
    matTooltipClass="right"
    [title]="''">
  

• 方法二：阻止默认tooltip事件（备选方案）
  如果方法一没生效，你可以通过监听鼠标事件来阻止Safari的默认行为。在组件的overlayEffecton方法里加上阻止默认操作的逻辑，不过这个稍微麻烦一点：
  先修改组件里的方法：

  overlayEffecton(node: any, event: MouseEvent) {
    event.preventDefault();
    // 你原来的逻辑代码
  }
  

  再同步修改模板里的事件绑定：

  (mouseenter)="overlayEffecton(node, $event)"
  

我个人更推荐方法一，简单直接，不会干扰其他逻辑。你可以先试试这个，应该就能解决Safari里双提示框的问题啦！

备注：内容来源于stack exchange，提问作者Bilal Tanveer