Positioning a div relative to mouse scroll position

Question

All,

On some mouse over, div1 is displayed.How to display the div next to the mouse pointer so that even mouseover at the end of the context the div should show up next to the mouse pointer.

<style type="text/css">
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).mouseover(function(event){
$("#div1").css({'top': event.pageY, 'left': event.pageX});  
});
});
</script>
<div id="div1">mouseover me</div>

Thanks..............

Answer 1

The usual term for what you want to do is "tooltip."

Your best bet is probably to use a JavaScript framework, like Prototip, which provides this functionality (as opposed to trying to code it yourself). (Search that link for the "Hooking" section to see how you would go about creating such a tooltip with Prototip.)

Answer 2

This might help: http://webdevpad.blogspot.com/2010/07/cross-browser-mouse-coordinates.html

Once you get the mouse position, give it a small offset, pass the coordinates to your tooltip div, and remember to give your tooltip position:fixed.