Angular 组件中获取的HTML元素坐标错误

我在gridster项中的SVG图表中添加了一个自定义工具提示（stackblitz上提供了所有示例）。工具提示（div）坐标是使用

nativeElement

获得的，并使用

Renderer2

设置（工具提示div偏移20px）。但是，当我在gridster项目中投影图表小部件时，工具提示总是添加到错误的位置（请参见-将鼠标悬停在圆圈上）。似乎对于每个小部件，div的坐标都会随着小部件距离窗口边缘（左侧和顶部）的距离而增加

从视觉上看，这是工具提示与圆的距离：

但实际上（元素离屏幕边缘越远，工具提示放置得越远）：

---

我试着看看这是否是

的问题，即

GridsterItem

中的内容投影，但在我看来，当我制作一个自定义组件来模拟它时，情况并非如此（请参阅）。为什么gridster项中的坐标很奇怪？

renderer

是否设置相对于小部件或

文档的坐标？
问题在于您根据圆的客户端位置设置工具提示位置。您需要的是圆相对于其父对象的位置

public mouseEnter($event, data): void {
  const circle = $event.target as HTMLElement;
  const parent = circle.parentElement;
  const circleCoords = circle.getBoundingClientRect();
  const parentCoords = parent.getBoundingClientRect();
  const relativeX = circleCoords.left - parentCoords.left;
  const relativeY = circleCoords.top - parentCoords.top;
  const x = `${relativeX + 20}px`;
  const y = `${relativeY + 20}px`;
  this.renderer.setStyle(this.tooltip.nativeElement, 'left', x);
  this.renderer.setStyle(this.tooltip.nativeElement, 'top', y);
  this.renderer.setStyle(this.tooltip.nativeElement, 'display', 'block');
  this.renderer.setProperty(this.tooltip.nativeElement, 'innerHTML', data);
}

请参阅演示。
您是一个救生员。我认为这可能是使用相对位置进行渲染的结果，但我真的很讨厌DOM。非常感谢你！