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

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>

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

I think a better word for what you're trying to make is 'tooltip' rather than 'comments'. Maybe update the question to reflect this? — Sydney Y
– Sydney Y, Commented Feb 9, 2020 at 22:48
Could you provide a picture of what move comments on top of the mouse pointer means? — Richard
– Richard, Commented Feb 10, 2020 at 8:27
Thank you, that's really helpful, but it doesn't clarify what move comments on top of the mouse pointer mean. Do you want the mouse pointer to disappear and instead be replaced by the text? Or do you want to move the text position slightly upwards? — Richard
– Richard, Commented Feb 10, 2020 at 13:01
Yes I want a the text should be positioned upside the mouse pointer, but want the mouse pointer remains under the text. — user6642297
– user6642297, Commented Feb 10, 2020 at 13:05

Maniraj Murugan · Accepted Answer · 2020-02-10 13:09:44Z

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>

steven.westside · Accepted Answer · 2020-02-09 23:31:47Z

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>

I am trying to move the comments/tooltip above the mouse pointer. The reason I put the overflow: hidden; is to bind the comments inside the picture. The box is displaced only when the pointer hovers the picture.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related