How can I move tooltip on top of the mouse pointer?

I am trying to move comments on top of the the mouse pointer, but having no success.

HTML:

<div id="box"> <div id="TextHidden"> <p id="screen-log"></p> </div>

let screenLog = document.querySelector('#screen-log');
        document.addEventListener('mousemove', logKey);

    var imgHgt = document.getElementById('box');

function logKey(e) {
    var d = document.getElementById('TextHidden');
  d.style.position = "absolute";
  d.style.left = e.clientX +'px';
  d.style.top = e.clientY +'px';

  screenLog.innerHTML = `${e.clientX}, ${e.clientY}` + "<br>Image Height = " + imgHgt.offsetHeight + "<br>Image Width = " + imgHgt.offsetWidth;
}

#box { width: 40%; display: block; position: absolute; overflow: hidden; }
.image { display: block; width: 100%; z-index: 1; }
#TextHidden { display: none; color: red; font-size;  20px; z-index: 10; } #box:hover #TextHidden { display: block; }
#screen-log { z-index: 11; }