Question

HTML：

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

两个问题：

工具提示div（＃tooltip-1）不会在mouseout上隐藏。
由于工具提示div总是与REL具有相同的ID，我想修改上面的jQuery，以便自动获取目标DIV ID。

提前感谢您的帮助。

Answer 1

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）在鼠标输出时不会隐藏。

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

因为工具提示div将始终具有与REL
相同的ID

如何将此信息放入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工具提示插件之一。）

Answer 2

只是添加到接受的答案：有一个更好的替代jQuery的工具提示名为jQuery tools。

查看demo。

jQuery Tooltip定位问题

2 个答案: