HTML:

<a href="#" rel="tooltip-1">Open Tooltip</a>
<div id="tooltip-1">Tooltip Content</div>

jQuery:

xOffset = $('#tooltip-1').height() + 10;
yOffset = -30 ;  
$("a[rel=tooltip-1]").hover(function(e){             
 this.t = this.attr("href");
 $("body").append("<p id='tooltip'>"+ this.t +"</p>");
 $("#tooltip")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px")
  .fadeIn("fast");  
},
function(){
 this.t = "";
 $("#tooltip").remove();
}); 
$("a[rel=tooltip-1]").mousemove(function(e){
 $("#tooltip-1")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px");
});

Two Issues:

1. Tooltip div (#tooltip-1) doesn't hide on mouseout.
2. Since the tooltip div will always have the same ID as REL, I'd like to modify the above jQuery so that it takes target DIV ID automatically.

Thanks in advance for your help.