Tooltip as dynamic component

Question

I want to add tooltip to the svg element, but as a component created dynamically. I add the tooltip to the element, using TooltipDirective on svg element i.e.

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

The TooltipDirective dyncamically creates TooltipComponent (in onMouseEnter method), and using renderer and ElementRef it sets it's position relative to the host element (the svg chart). Or at least it should do it. The problem is that it doesn't, and despite setting the position of the TooltipComponent, the component is always added in the wrong place. The tooltip should be next to the circle, not way below as shown here:

Why is the dynamic tooltip component ignoring style options set using the Renderer? Here is the full example. The idea is to add tooltip as a component, in order to try to avoid svg's parent element overflow: hidden settings.

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