How to get correct MouseHover Coordinates on datamaps

Question

I am using DataMap, unlike the normal view for a map, I turned the map upside down, When mouseover, the tooltip location doesn't correspond, to the location of the mouse when I mouseover

I have tried different codes, in other to get accurate coordinates, but none is giving me what I need.

In the map react component

<Map mapRef= {this.myMap} makeMouseMove={this._onMouseMove} />

1st try

  _onMouseMove = (e) => {
        if (document.querySelector('.hoverinfo')) {
          let mapTooltip = document.querySelector('.datamaps-hoverover');
          let rect = e.target.getBoundingClientRect();
          mapTooltip.style.left = e.clientX - rect.left + 'px';
          mapTooltip.style.top = e.clientY - rect.top + 'px';
       }
     }

2nd Try

 _onMouseMove = (e) => {
        if (document.querySelector('.hoverinfo')) {
          let mapTooltip = document.querySelector('.datamaps-hoverover');
    mapTooltip.style.left = e.pageX - mapTooltip.offsetLeft+'px';
    mapTooltip.style.left = e.pageY - mapTooltip.offsetTop+'px';
       }
    }

Unfortunately, I have not been able to achieve what I want to achieve, I would appreciate if someone that has experience handling this Datamap issue helps me with a clue.

Answer 1

In case someone else is having this type of issue, this is what I did to resolve it, apparently, the left value is correct, and there was no need for me to modify it.

        _onMouseMove = (e) => {
           if (document.querySelector('.hoverinfo')){
             let mapTooltip = document.querySelector('.datamaps-hoverover');
             let mapHoverSVG = document.querySelector('svg');
             let point = mapHoverSVG.createSVGPoint();
             point.x = e.clientX;
             point.y = e.clientY;
             let cursor = point.matrixTransform(mapHoverSVG.getScreenCTM().inverse());
             mapTooltip.style.top = (cursor.y + 16) + "px";
             console.log(cursor.y); 
        }
      }