2

我在 gridster 项目中的 SVG 图表中添加了一个自定义工具提示（所有示例都在 stackblitz 上提供）。工具提示 (div) 坐标是使用（简单示例- 工具提示 div 偏移 20px）获取nativeElement和设置的。但是，当我在 gridster 项目中投影图表小部件时，工具提示总是添加到错误的位置（请参阅完整示例- 将鼠标悬停在圆圈上）。似乎对于每个小部件，div 的坐标都会增加该小部件距离窗口边缘（左侧和顶部）的距离。Renderer2

从视觉上看，这是工具提示应该离圆圈多远：

普通的

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

不正常

我试图看看这是否是<ng-content>ie 中的内容投影的问题GridsterItem，但是当我制作一个自定义组件来模仿它时，我似乎并不喜欢这样（参见这个例子）。为什么 gridster 项目中的坐标很时髦？是renderer相对于小部件设置坐标，还是相对于document?

4

1 回答 1

2

问题是您根据圆圈的客户端位置设置工具提示位置。您需要的是圆相对于其父级的位置。

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);
}

请参阅此 stackblitz以获取演示。

于 2019-01-31T12:54:29.467 回答