0

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:

The tooltip ignores the coordinates set with the renderer

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.

Gitnik
  • 564
  • 7
  • 26

1 Answers1

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

Sam Herrmann
  • 6,293
  • 4
  • 31
  • 50
  • Oh wow, I though something was wrong with the directive! Is it possible though to add component so that it avoids `overflow: hidden` of the parent element (the grid item, e.g. if `const x = `${relativeX - 100}px``)? – Gitnik Feb 04 '19 at 17:44
  • 1
    I don't know if there is an easier way, but here is one idea that comes to mind: split your tooltip directive into 2. One that listens to the mouse events and one that does the tooltip rendering. Apply the tooltip-rendering directive at the app component level so that the tooltip will be rendered relative to the app not the svg component. The tooltip directive can send the coordinates to the tooltip-rendering directive through a service. It's just an idea in case there is no pure CSS solution. – Sam Herrmann Feb 04 '19 at 18:11
  • Thanks! I can also set `overflow: visible;` on gridster-item in this dummy example, but the CSS solution is not really possible on my production code. For anyone stumbling upon this in future ngx-charts has the tooltip implementation that ignores overflow, but complicate implementation. – Gitnik Feb 04 '19 at 18:15
  • I'll try to see if I can implement yous solution, there's probably no easy way around this. – Gitnik Feb 04 '19 at 18:15