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

Continue reading...