Using Mouse/cursor Coordinates To Position Popup

I'm using this code to show a popup, for a mini-profile in phpBB, triggered by a mouseover event I'm looking to use the mouse coordinates to display the popup with the top at the

Solution 1:

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