mousemove事件返回鼠标位置异常，Tooltip无法精准跟随鼠标

问题原因分析 #

你遇到的位置偏差主要来自三个点：

1. 鼠标坐标参考系错误：event.pageX/pageY是相对于整个文档的坐标，当页面存在滚动或者Tooltip的父元素有position: relative时，会导致定位偏差。
2. Tooltip与鼠标重叠：直接将Tooltip定位在鼠标坐标上，会让Tooltip覆盖鼠标，既影响视觉体验，还可能触发意外的mouseout事件。
3. DOM元素获取方式低效且风险高：反复使用getElementsByClassName不仅性能差，若页面存在多个同类元素还会导致错误定位。

解决方案代码修改 #

1. 组件类优化（使用Angular最佳实践）

改用@ViewChild获取Tooltip元素，同时替换鼠标坐标属性并添加偏移量：

import { Component, HostListener, ViewChild, ElementRef } from '@angular/core';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  tooltipMsg = '';
  // 通过模板引用变量获取Tooltip元素
  @ViewChild('tooltip') tooltipNode!: ElementRef<HTMLElement>;

  @HostListener('mousemove', ['$event']) onMouseMove(event: MouseEvent) {
    const tooltipEl = this.tooltipNode.nativeElement;
    // 使用clientX/clientY（相对于视口），并添加偏移避免遮挡鼠标
    tooltipEl.style.left = `${event.clientX + 10}px`;
    tooltipEl.style.top = `${event.clientY + 10}px`;
  }

  public onMouseOver(event: MouseEvent) {
    const tooltipEl = this.tooltipNode.nativeElement;
    tooltipEl.style.display = 'block';
    this.tooltipMsg = (event.target as HTMLElement).innerText;
  }

  public onMouseOut(event: MouseEvent) {
    const tooltipEl = this.tooltipNode.nativeElement;
    tooltipEl.style.display = 'none';
  }
}

2. HTML模板修改（添加模板引用变量）

给Tooltip元素加上#tooltip引用，方便组件类直接获取：

<div #tooltip class="dhemax-tooltip"> {{ tooltipMsg }} </div>

3. CSS补充说明

原CSS样式可以保留，但需确认：

• Tooltip的父元素不要设置position: relative，否则left/top会以父元素为参考系，导致定位偏差。如果必须给父元素设置相对定位，建议将Tooltip移到根组件（如app.component）中，确保它的定位参考系是整个视口。

额外说明 #

• clientX/clientY是相对于当前浏览器视口的坐标，不受页面滚动影响，比pageX/pageY更适合绝对定位的Tooltip。
• 添加的+10px偏移量可以根据需求调整，核心是让Tooltip和鼠标保持一定距离，避免遮挡和事件冲突。

内容的提问来源于stack exchange，提问作者Cristofer Fuentes