2 tooltips appearing on mousehover

This is my code. I am getting 2 tooltips in Safari. I want one tooltip that I have already prepared.

Can you kindly let me know how to make the default browser tooltip disappear?

<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">