Angular 作为动态组件的工具提示

我想将工具提示添加到svg元素，但作为动态创建的组件。我使用元素将工具提示添加到元素，即

<circle tooltip [hostContainerRef]="chartContainerRef" [hostElement]="">chartElement [data]="d.tooltip"></circle>

动态地在onMouseEnter方法中创建，并使用renderer和ElementRef设置它相对于svg图表中的宿主元素的位置。或者至少它应该这样做。问题是它没有，尽管设置了TooltipComponent的位置，但组件总是添加到错误的位置。工具提示应位于圆的旁边，而不是下方，如图所示：

为什么动态工具提示组件会忽略使用渲染器设置的样式选项？这是。其想法是将工具提示添加为组件，以避免svg的父元素溢出：隐藏设置。

tooltip.component.css

/* Add the following block */
:host {
  display: block;
  position: fixed;
}

.tooltip {
  display: block;
  /* Remove => position: absolute;*/
  font-size: 0.75em;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding: 5px;
  border-style: solid;
  border-color: gray;
  border-width: 1px;
  border-radius: 2px;
}

---

哇，我还以为指令有问题呢！是否可以添加组件以避免溢出：隐藏父元素的网格项，例如，if const x=${relativeX-100}px``？我不知道是否有更简单的方法，但我想到了一个想法：将工具提示指令拆分为2。一个侦听鼠标事件，另一个执行工具提示渲染。在应用程序组件级别应用tooltip rendering指令，以便工具提示将相对于应用程序而不是svg组件进行呈现。tooltip指令可以通过服务将坐标发送到tooltip rendering指令。这只是一个想法，以防没有纯CSS解决方案。谢谢！我还可以设置溢出：可见；在这个虚拟示例中的gridster项上，但是CSS解决方案在我的产品代码上实际上是不可能的。对于任何在未来的ngx图表中遇到这个问题的人来说，工具提示的实现忽略了溢出，但使实现变得复杂。我将尝试看看我是否能实现您的解决方案，可能没有简单的方法来解决这个问题。