如预期jQuery的工具提示不起作用

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