Mostrar Imagen por ensima de un link con Jquery

[Hypnoss]

Hola amigos del foro como bien dice esto estoy implementando una funcion en Jquery en donde al pasar el cursor del ratón por un enlace quiero se de muestre una imagen a manera de tooltip, lo malo es que la imagen siempre se muestra por debajo del link el codigo css es el siguiente:

Código:

#imagen{
	position:absolute;
	padding:5px;
	display:none;
	color:#fff;
}

y el de JQuery es este:

Código:

this.screenshotPreview = function(){	
		
		xOffset = 10;
		yOffset = 30;
		
	$("a.imagen").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='imagen'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");								 
		$("#imagen")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#imagen").remove();
    });	
	$("a.screenshot").mousemove(function(e){
		$("#imagen")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


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

Se supone que .css("top",(e.pageY - xOffset) + "px") es para ir subiendo el objeto pero no me lo acepta sencillamente no hace nada solo tiembla el cursor y al darle "+" en vez de "-" obvio me lo va bajando.

¿Como le hago para que pueda ponerlo por ensima del Link???