jQuery的工具提示定位问题

问题描述：

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

两个问题：

工具提示格（＃提示-1）不隐藏鼠标移开时。
由于tooltip div始终与REL具有相同的ID，所以我想修改上面的jQuery，以便自动获取目标DIV ID。

在此先感谢您的帮助。

答

this.t = this.attr("href");

this是DOM节点，而不是一个jQuery包装：没有attr()方法。

（我也不知道为什么你的节点上写在Expando t财产，你似乎没有其他任何地方使用它。）

$("body").append("<p id='tooltip'>"+ this.t +"</p>");

尽量不要把HTML字符串从纯文本。任何&或<字符在t和您的HTML是搞砸了。（这是一种让跨站点脚本编写安全漏洞的简单方法。）使用text()可以在元素中设置纯文本内容。

（虽然我不确定为什么要将#属性值写入工具提示中，您是否尝试读取工具提示div的HTML并将其复制到p？为什么不使用工具提示div本身？）

工具提示div（＃tooltip-1）不隐藏在mouseout上。

它不会隐藏/显示，您的脚本没有触及任何地方。

由于工具提示格将始终具有相同的ID作为REL

如何把在href片段信息，而不是滥用rel？然后链接实际上指向它将弹出的地方。

例如。是这样的：

<a href="#footnote1" class="tooltip">?</a> 

<div id="footnote1" style="background: yellow; width: 10em;"> 
    Hello! 
</div> 

$('.tooltip').each(function() { 
    var tip= $(this.hash); 
    var dx= -30, dy= -tip.height()-10; 
    tip.css('position', 'absolute'); 
    tip.hide(); 

    function position(e) { 
     tip.css('left', e.pageX+dx+'px').css('top', e.pageY+dy+'px'); 
    } 
    $(this).mousemove(position); 

    $(this).hover(function(e) { 
     position(e); 
     tip.show('fast'); 
    }, function(e) { 
     tip.hide('fast'); 
    }); 
});

（或者只是使用了很多已经存在的jQuery的工具提示插件之一。）

答

只需添加到接受的答案：有是jQuery的工具提示一个更好的选择叫jQuery tools。

查看demo。

jQuery的工具提示定位问题

相关推荐