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???

[chicohot20]

creo que es un tema de css: z-index

[Hypnoss]

tendría que ponerle un z-index al enlace o a que te refieres con el z-index?? ya lo probé en algún momento y hacia lo mismo el ToolTip se muestra abajo del enlace yo lo que quiero es que pueda ponerse arriba del enlace o al lado del enlace por que tengo enlaces pegados arriba otros del lado derecho y otros del lado izquierdo.

¿Alguna Sugerencia?

[chicohot20]

Código CSS:

#imagen{
    position:absolute;
    padding:5px;
    display:none;
    color:#fff;
    z-index: 999;
}