Using mouse/cursor coordinates to position popup

Question

I'm using this code to show a popup, for a mini-profile in phpBB, triggered by a mouseover event

<style type="text/css">
.popUpProfile
{
position: absolute;
z-index: 3;
         left: 100px;
        top: 200px;
font-size: 14px;
background-color: #DCEBFE;
margin: 0 10px;
padding: 5px;
width: 450px;
border: solid 2px red;
border-radius: 8px;
resize:both;
overflow:auto;
 
visibility: hidden;
}
</style>

I'm looking to use the mouse coordinates to display the popup with the top at the same level as the hovered text, ie the mouse y position, and the left of it around 200px to the right. Using this code, which I have just found

<script type="text/javascript">
window.onload = init;
function init() {
 if (window.Event) {
 document.captureEvents(Event.MOUSEMOVE);
 }
 document.onmousemove = getCursorXY;
}

function getCursorXY(e) {
 document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
 document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
</script>

I've now got x and y variables, called cursorX and cursorY, but struggling to get these into the first code, and thus pass the coordinates to the popup. I've tried

left: cursorX + "px"

which looks like it should work from instances shown on this site, but it doesn't!

Can anyone advise on how to pass the variables, and also if the code used to obtain them is as efficient as it could be?

Any help would be appreciated (and apologies if this is old ground, but I have searched to no avail!)

Cheers!

`I've now got x and y variables, called cursorX and cursorY`, no you have Elements which contain numbers corresponding to coordinates as their values. Do these Elements display the values you assign them? Is that the issue you are having? — chRyNaN, May 08 '15 at 18:42
From the code you provided, cursorX is NOT a variable but an ID of an element. You would then need to retrieve the elements value. Set your left value to: `document.getElementById("cursorX").value + "px";` — chRyNaN, May 08 '15 at 18:46
Cheers chRyNaN - I see what you are saying there. Soz! Tried what you said but it's not doing as expected. If there's any way to easily get the mouse coordinates, then pass them to the left and top positioning of the popup (left in all honesty is probably fine fixed at 180px, top to match mouse position), then any advice appreciated! Thanks you — BigDave, May 08 '15 at 21:27

score 1 · Accepted Answer · edited May 23 '17 at 11:43

The following code captures mouse coordinates and places your element at that position (Code taken from this Stack Overflow answer.

document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
    var dot, eventDoc, doc, body, pageX, pageY;

    event = event || window.event; // IE-ism

    // If pageX/Y aren't available and clientX/Y are,
    // calculate pageX/Y - logic taken from jQuery.
    // (This is to support old IE)
    if (event.pageX == null && event.clientX != null) {
        eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
          (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
          (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
          (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
          (doc && doc.clientTop  || body && body.clientTop  || 0 );
    }

    // Use event.pageX / event.pageY here
    //now you must set your elements left and top values dynamically using JavScript
    //This assumes one element with that class name so it takes the first element 
    //returned by getElementsByClassName()
    var myElem = document.getElementsByClassName("popUpProfile")[0];

    myElem.style.left = event.pageX + "px";
    myElem.style.top = event.pageY + "px";
}

That's great! Thanks for finding this - much appreciated! :) — BigDave, May 09 '15 at 18:15
Ummm. Is there a button for this? Sorry - I post on forums dozens of times a day but have yet to see one with the layout and protocols that this one has :) — BigDave, May 11 '15 at 15:50

Using mouse/cursor coordinates to position popup

1 Answers1

Linked