Displaying DIV at mouse position on hover with hoverIntent

Question

Ok, so I have a table containing information about jobs.

The goal is that when the user hovers on a row in this table about a specific job, jQuery makes an Ajax call, retrieves the data about the job and displays it in a pop up at the mouse position.

My Javascript/jQuery is as follows:

$('#report').find('tr').hoverIntent({  // mouseover
    over: statusOnHover,
    out: statusOffHover 
});


function statusOnHover(){   
        $.ajax({
            type: "POST",
            data: "data=" + $(this).attr('id'),
            url: "ajax/latest_update.php",
            success: function(msg){
                if (msg != ''){
                    $("#message").html(msg);
                    $("#message").css({
                        'position':absolute,
                        'top':event.pageY,
                        'left':event.pageX
                    });
                }
            }
        });
}
function statusOffHover(){
    $("#message").html('');
}

So we're finding a table row, and then when the user intends to hover on it (using hoverIntent) it runs a mouse over function. This function calls the latest_update.php script which delivers a preformatted sample of HTML data based upon the job_id pulled from the row ID. This HTML data is then inserted into the message div.

Now the AJAX query runs fine, and it copies the data into the div, but the CSS formatting to make the div float to the mouse pointer does not work. This CSS DOES work when using standard .mouseover and .mouseout.

I haven't had much luck troubleshooting this so far and have tried a number of things. Does anyone have any ideas?

Answer 1

Unfortunately the answer provided by Dave didn't give the correct solution. It did display the div on hover, but did not display the requisite DIV at the mouse pointer position.

The issue was that the CSS to display the div at mouse position would only be called at mouse move to get the required event positions.

Note that this solution still uses hoverIntent to manage the delay.

Correct code as follows:

$('#report').find('tr').hoverIntent({  // mouseover
    over: statusOnHover,
    out: statusOffHover 
});

function statusOnHover(){   
    $(this).mousemove(function(event){
        $('#message').css({'top':event.pageY,'left':event.pageX});
    });
    $.ajax({
        type: "POST",
        data: "data=" + $(this).attr('id'),
        url: "ajax/latest_update.php",
        success: function(msg){
            if (msg != ''){
                $('#message').html(msg).show();

            }
        }           
    }); 
}
function statusOffHover(){
    $("#message").html('');
}