Jquery Tooltips: How to position them within window?

Hi all,

I have this photo gallery that I’m setting up where I’ve used some jquery to pop a magnified view of an image when the mouse is hovered over the thumbnail. As it is right now, it always positions the magnified image with the top-left corner at the x and y position of the mouse cursor. What I need it to do is if the image is going to be displayed beyond the viewport, that it would change its positioning to the corner that will show the whole image.

Here’s my page so far:

[url]http://thekevbot.com/fresh/classic/gallery.html[/url]

Here’s my jquery script:

[CODE]<script type=”text/javascript”>

$(document).ready(function() {

//Select all anchor tag with rel set to tooltip
$(‘a[rel=tooltip]’).mouseover(function(e) {

//Grab the title attribute’s value and assign it to a variable
var tip = $(this).attr(‘title’);

//Remove the title attribute’s to avoid the native tooltip from the browser
$(this).attr(‘title’,”);

//Append the tooltip template and its value
$(this).append(‘<div id=”tooltip”><div class=”tipHeader”></div><div class=”tipBody”>’ + tip + ‘</div><div class=”tipFooter”></div></div>’);

//Show the tooltip with faceIn effect
$(‘#tooltip’).fadeIn(‘500’);
$(‘#tooltip’).fadeTo(’10’,1);

})[B].mousemove(function(e) {

//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
$(‘#tooltip’).css(‘top’, e.pageY + 10 );
$(‘#tooltip’).css(‘left’, e.pageX + 20 );[/B]

}).mouseout(function() {

//Put back the title attribute’s value
$(this).attr(‘title’,$(‘.tipBody’).html());

//Remove the appended tooltip template
$(this).children(‘div#tooltip’).remove();

});

});

</script>
[/CODE]

I’m sure that I’ll have to use some if/else statements in the bolded section, but I’m definitely NO expert with jQuery and I have no clue as to what needs to be done.

And the CSS for the Tooltip:

[CODE]#tooltip {
position:absolute;
z-index:1000;
}
#tooltip .tipBody {
background-color:#000;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
}[/CODE]

Any tips or suggestions that you might have are greatly appreciated! ?

Also in #JavaScript _↴