tooltip.js image stets im viewport

[Mandy]

Hi,
ich bin anfänger und habe probleme eins der codeschnipsel in das tooltip.js script einzufügen damit das tooltip onmouseover bild stets im viewport bleibt also im sichtbaren bereichen, nicht abgschnitten. d.h. jeweils unter oder über dem mauszeiger.

keine ahnung welches von den beiden codeschnipseln besser ist.

hoffe ihr experten könnt mir da sagen wo des reinkommt. habe wie gesagt vieles ausprobiert...

lg mandy

TOOLSTIP.JS:

  
  
this.screenshotPreview = function(){	  
	/* CONFIG */  
		  
		xOffset = 115;  
		yOffset = 160;  
		  
		// 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='loading...' width='150' />"+ 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();  
});  
  
  

SCHNIPSEL 1:

$(".imageTooltip").mousemove(function(e){  
var posY;  
  
if (e.pageY - $(window).scrollTop() + $('#tooltip').height() >= $(window).height() ) {  
posY = $(window).height() + $(window).scrollTop() - $('#tooltip').height() - 15 ;  
} else {  
posY = e.pageY - 15;  
}  
$("#tooltip")  
.css("top",(posY) + "px")  
.css("left",(e.pageX + 15) + "px");  
});  

SCHNIPSEL 2:

To position the tooltip depending where you are, you need to rewrite some of the code using the offset() property of jQUERY.  
  
var toolTipPosition = $(this).offset(); //Declare the Offset object  
var offsetX = 0;  
var offsetY = 0;  
//Then in the hover property  
$("#tooltip")  
.css("top",( toolTipPosition.top - posiY) + "px")//Will set where the link/thumbnail is horizontally  
.css("left",( toolTipPosition.left + this.offsetWidth/2 + posiX) + "px") /*Will be positioned to the middle of the link/thumbnail, you can alway remove this.offsetWidth/2 to remove the middle placement thing.*/  
//Remove the mouseover function and your set!  
  
.fadeIn("fast");