Tooltip Help

Tooltip Help

Hi,
I am a n00b to jquery and I am using this code for a tooltip with image preview which works perfectly for my site other than flowing off the screen. http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery Example 3
Demo: http://cssglobe.com/lab/tooltip/03/
Could anyone help with modifying the code to keep the tooltip in the viewport and not go off screen. I am completely lost with this and my JS skills are not up to par so I am pulling my hair out . There are many others in the comment section of that site who are looking for the same. Any help would be much appreciated. TIA


/*
* Url preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.screenshotPreview = function(){   
   /* CONFIG */
      
      xOffset = 10;
      yOffset = 30;
      
      // these 2 variable determine popup's distance from the cursor
      // you might want to adjust to get the right result
      
   /* END CONFIG */
   $("a.screenshot").hover(function(e){
      this.t = this.title;
      this.title = "";   
      var c = (this.t != "") ? "<br/>" + this.t : "";
      $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");                        
      $("#screenshot")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px")
         .fadeIn("fast");                  
    },
   function(){
      this.title = this.t;   
      $("#screenshot").remove();
    });   
   $("a.screenshot").mousemove(function(e){
      $("#screenshot")
         .css("top",(e.pageY - xOffset) + "px")
         .css("left",(e.pageX + yOffset) + "px");
   });         
};


// starting the script on page load
$(document).ready(function(){
   screenshotPreview();
});



:? [/url]