CODEWITHSUNDEEP
javascripthtmlcss
user6642297
user6642297

Reputation: 393

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

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>

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

Upvotes: 2

Views: 347

Answers (2)

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

Change your left and top position pixels like,

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

And the snippet as follows,

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>

Upvotes: 1

steven.westside
steven.westside

Reputation: 284

Your approach is working in principle, but you don't see the moving text because it is currently hidden. Note that I commented out the overflow: hidden and display: none properties in your stylesheet.

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>

Upvotes: 0

Related Questions