Подсказка как динамический компонент

Question

Я хочу добавить всплывающую подсказку к элементу svg, но как компонент, созданный динамически. Я добавляю подсказку к элементу, используя TooltipDirective на элемент SVG т.е.

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

TooltipDirective синусоидально создает TooltipComponent (в onMouseEnter метод), и с помощью рендерера и ElementRef он устанавливает свою позицию относительно хост-элемента (диаграмма SVG). Или, по крайней мере, он должен это сделать. Проблема в том, что это не так, и, несмотря на установку позиции TooltipComponent компонент всегда добавляется не в том месте. Подсказка должна быть рядом с кругом, а не ниже, как показано здесь:

Почему динамический компонент всплывающей подсказки игнорирует параметры стиля, заданные с помощью Renderer? Вот полный пример. Идея состоит в том, чтобы добавить всплывающую подсказку в качестве компонента, чтобы попытаться избежать родительского элемента 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;
}

Рабочий пример