How do I position a div relative to the mouse pointer using jQuery?

Question

Suppose I have one link in my page and I want that when I place my mouse just over the link, a div will show there according to mouse x,y.

How can I accomplish this

Answer 1

You don not need to create a $(document).mousemove( function(e) {}) to handle mouse x,y. Get the event in the $.hover function and from there it is possible to get x and y positions of the mouse. See the code below:

$('foo').hover(function(e){
    var pos = [e.pageX-150,e.pageY];
    $('foo1').dialog( "option", "position", pos );
    $('foo1').dialog('open');
},function(){
    $('foo1').dialog('close');
});