Html – 2 tooltips appearing on mousehover

It looks like your framework is generating a title attribute on the rendered page. You need to set the title attribute to be empty.

Example Code (untested):

import { Directive, ElementRef, Renderer2 } from '@angular/core';
    
    @Directive({
      selector: '[disableTitleTooltip]'
    })
    export class DisableTitleTooltipDirective {
      constructor(private el: ElementRef, private renderer: Renderer2) {
        this.renderer.setAttribute(this.el.nativeElement, 'title', '');
      }
    }

And add the selector to your element:

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