Jquery工具提示未按预期工作

以下是我将鼠标悬停在链接上时工具提示弹出窗口的jquery代码

错误是当我将鼠标悬停在它上面时，它会将标题设置为nothing show它将显示一次，然后如果我将鼠标悬停在它上面，则不会显示任何内容

当我删除此项时。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");
});         

this.tooltip=function（）{
xOffset=10；
yOffset=20；
$（“a.tooltip”）.hover（函数（e）{
this.t=this.title；
this.title=“”；
$（“body”）.append（“
”+this.t+”
”）；
$（“#工具提示”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）
.fadeIn（“快速”）；
},
函数（）{
this.title=this.t；
$（“#工具提示”）.remove（）；
}); 
$（“a.tooltip”）.mousemove（函数（e）{
$（“#工具提示”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
});         

---

})

您需要先检查标题是否为空。原因是，无论发生什么，您都在盲目地设置

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

this.tooltip=function（）{
xOffset=10；
yOffset=20；
$（“a.tooltip”）.hover（函数（e）{
if（this.t==未定义| | this.t.length==0）{
this.t=this.title；
this.title=“”；
}
$（“body”）.append（“
”+this.t+”
”）；
$（“#工具提示”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）
.fadeIn（“快速”）；
}，函数（）{
this.title=this.t；
$（“#工具提示”）.remove（）；
}); 
$（“a.tooltip”）.mousemove（函数（e）{
$（“#工具提示”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
});

您需要首先检查标题是否为空。原因是您盲目地设置了

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

this.tooltip=function（）{
xOffset=10；
yOffset=20；
$（“a.tooltip”）.hover（函数（e）{
if（this.t==未定义| | this.t.length==0）{
this.t=this.title；
this.title=“”；
}
$（“body”）.append（“
”+this.t+”
”）；
$（“#工具提示”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）
.fadeIn（“快速”）；
}，函数（）{
this.title=this.t；
$（“#工具提示”）.remove（）；
}); 
$（“a.tooltip”）.mousemove（函数（e）{
$（“#工具提示”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
});