Jquery tooltip help

Question

Here is the jquery code for a tooltip popup when i hover over a link.

Error is when i hover over it, it sets title to nothing show it will show once and then nothing will come up if i re hover over it.

When i remove this.title = ""; it works but the link title comes up aswell

HTML

 < a href="#" class="tooltip" title="Name< br>Test">ToolTip< /a>

JQUERY

 this.tooltip = function(){ 

 xOffset = 10;
 yOffset = 20;    

$("a.tooltip").hover(function(e){             
 this.t = this.title;
 this.title = "";            
 $("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.title = this.t;  
 $("#tooltip").remove();
}); 
$("a.tooltip").mousemove(function(e){
 $("#tooltip")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px");
});

};

Answer 1

You will want to perform a check if the title is empty first. The reason why is because you're blindly setting the t variable no matter what and clearing the title. Try this:

this.tooltip = function(){ 
    xOffset = 10;
    yOffset = 20;

    $("a.tooltip").hover(function(e){
        if(this.t === undefined || this.t.length == 0) {

           this.t = this.title;
           this.title = "";
        }
        $("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.title = this.t;
        $("#tooltip").remove();
    }); 
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px");
});