JQuery tooltip не работает должным образом

Question

Вот код jQuery для всплывающей подсказки всплывающей подсказки при наведении курсора на ссылку.

Ошибка Когда я нахожусь над ним, он устанавливает название ни к чему, показывая, что он будет отображаться один раз, и тогда ничего не получится, если я перевернусь над ним.

Когда я удаляю this.title = ""; он работает, но название ссылка подходит как хорошо

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

Вы хотите выполнить проверку, если заголовок пуст первым. Причина в том, что вы слепо устанавливаете переменную t независимо от того, что и очищаете заголовок. Попробуйте следующее:

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"); 
});