Как я могу переместить всплывающую подсказку поверх указателя мыши?

Question

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; }

<div id="box"> 
  <img src="https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg" class="image"></p> </img>
  <div id="TextHidden">Hovering<p id="screen-log"></p></div>
 </div> 

Я пытаюсь переместить комментарии поверх указателя мыши, но безуспешно.

Answer 1

Измените свои left и top позиции пикселей, например,

  d.style.left = (e.clientX - 50) +'px';
  d.style.top = (e.clientY - 100) +'px';

И фрагмент кода следующим образом:

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 - 50) +'px';
  d.style.top = (e.clientY - 100) +'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; }

<div id="box"> 
  <img src="https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg" class="image"></p> </img>
  <div id="TextHidden">Hovering<p id="screen-log"></p></div>
 </div> 

Answer 2

Ваш подход в принципе работает, но вы не видите движущийся текст, потому что он в данный момент скрыт. Обратите внимание, что я закомментировал свойства overflow: hidden и display: none в вашей таблице стилей.

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;
}

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