工具提示作为动态组件

Question

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

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

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

为什么动态工具提示组件会忽略使用渲染器设置的样式选项？这里是the full example。思路是将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;
}

Working example

工具提示作为动态组件

Tooltip as dynamic component

angular-directive

angular

angular-renderer2

angular-dynamic-components