Position div at mouse

Question

I have a floating DIV with dynamic content like this

<div id="rollover" style="display:none;background:#ffff99;width:150px;position:absolute;z-index:9999">
    <div id="rollover_content" style="padding:4px;border:1px solid"></div>
</div>

Event handlers fetch relevant content and set the innerHTML of the inner DIV. How can I position the top/left of the div as close as possible to the mouse position?

jQuery is available on the page, if that helps.

Thanks

Answer 1

Here you can see how to get mouse coordinates: http://docs.jquery.com/Tutorials:Mouse_Position

From there you can update div absolute positioning to whatever the coords are.

Answer 2

I believe what you want is the jQuery UI Position plugin. More info here.

Answer 3

Assuming e is the parameter in your event handler:

$("#rollover").css({left:e.pageX + "px", top:e.pageY + "px"});