Mouseover puede ser un evento que se activa muchas veces en unos pocos segundos, por ejemplo, el cursor se mueve 1px mientras aún está sobre el mismo htmlElement.

Teniendo en cuenta que...

• intente evitar llamar a console.log siempre (incluya una condición de algún tipo)
• en lugar de llamar a este método cada vez this.el.nativeElement.querySelector('#first') lo asigna a una variable y lo reutiliza

 let first = this.el.nativeElement.querySelector('#first') ; first.left = e.pageX.toString() + 'px'; first.style.top = e.pageY.toString() + 'px'; first.classList.add('show');

no solo hace que su código sea más legible, sino que evita consultas una y otra vez para obtener el mismo resultado en cada llamada a onmouseover

En lugar de usar mouseover y mouseleave , use:

• mousenter para detectar cuando el mouse ingresa al div . Aquí es donde se muestra la información sobre herramientas.
• mousemove para detectar cuando el mouse se mueve dentro del div . Aquí es donde se coloca la información sobre herramientas.
• mouseleave para detectar cuándo el mouse abandona el div . Aquí es donde se oculta la información sobre herramientas.

Además:

• No realice la consulta del mismo elemento varias veces en una función, pero realice la búsqueda una vez y guárdela en una variable. Posiblemente, incluso puede realizar la búsqueda solo una vez en la inicialización del componente, pero eso depende de la lógica adicional de su componente.
• Asegúrese de configurar pointer-events en none para la información sobre herramientas; si no, obtendrá interferencias del mouse al entrar y salir de la información sobre herramientas.

Poniendo todo esto junto, se obtiene el siguiente código:

Componente:

 import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { name = 'Angular'; constructor(private el: ElementRef) {} get tooltip() { return this.el.nativeElement.querySelector('#first'); } enter() { this.tooltip.classList.add('show'); } move(e: { pageX: number; pageY: number }) { const tooltipStyle = this.tooltip.style; tooltipStyle.left = e.pageX + 'px'; tooltipStyle.top = e.pageY + 'px'; } leave() { this.tooltip.classList.remove('show'); } }

Modelo:

 <div (mouseenter)="enter()" (mousemove)="move($event)" (mouseleave)="leave()" class="place-welcome" > <h2>This is a Panel</h2> <p>Hello my darling</p> </div> <div id="first">asdasdasdasd</div>

Hoja de estilo:

 #first { position: absolute; opacity: 0; pointer-events: none; } .place-welcome { width: 100%; height: 300px; background: red; } .show { opacity: 1 !important; }

Ver en StackBlitz