Question

I got the div to load a page when hovering over the hyperlink attached to the photo, but if the photo is too close to the viewable screen area, the div will be cut off and you have to scroll to see it. How can I offset the div so the entire div is shown within the viewable area? Also, I was expecting the div to move along with the mouse as the mouse moved across the photo, that is not occurring.

<script type="text/javascript">
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX; 
mouseY = e.pageY;
});  
$(".ttip").mouseover(function(){
$('#meminfotip').css({'top':mouseY,'left':mouseX}).show().load('blah.php?id='+this.id);
});

$('.ttip').mouseout(function(){
$('#meminfotip').hide();
});
</script>

<a class="ttip" id="1" href="blahh.php?id=1>"><img src="images/blah.jpg" /></a>

<div id="meminfotip" style="display:none;z-index:999999;position:absolute;"></div>

Answer 1

You can use the jquery UI position method:

$('.ttip').mousemove(function (ev) {
 $("#meminfotip").position({
    my: "left bottom",
    of: ev,
    offset: "3 -3",
    collision: "fit"
  });
});