markers: render tooltip in center

src/components/markers.ts

@@ -105,12 +105,11 @@ export class Markers {
 
     const linePosition = this._getLinePosition(marker);
 
-    this._chartContainer
+    const div = this._chartContainer
       .append('div')
       .attr('class', `marker-content marker-content-${marker.x}`)
       // @ts-ignore // TODO: remove ignore but boxParams are protected
       .style('top', `${this._state.boxParams.height - this._chartHeight}px`)
-      .style('left', `${linePosition + this._margin.left + 10}px`)
       .style('visibility', marker.alwaysDisplay ? 'visible' : 'hidden')
       .style('position', 'absolute')
       .style('border', '1px solid black')
@@ -125,6 +124,10 @@ export class Markers {
       .style('pointer-events', 'none')
       .style('z-index', 1)
       .html(marker.html);
+
+    // align tooltip: center (we need it to be rendered first)
+    // PS: 8px is the empiric constant to center the div ideally
+    div.style('left', `${linePosition + this._margin.left - div.node().getBoundingClientRect().width / 2 + 8}px`)
   }
 
   protected renderSerie(serie: MarkerSerie) {