angular - 工具提示作为动态组件

Question

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

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

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

为什么动态工具提示组件忽略了使用渲染器设置的样式选项？这是完整的例子。想法是将tooltip添加为组件，以尽量避免svg的父元素overflow: hidden设置。

Answer 1

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

工作示例