jQuery /CSS - 获取相对元素的位置，相应地定位工具提示

Question

我有一张显示各个位置的地图，当将鼠标悬停在该地图上时，光标旁边会显示一个工具提示，显示有关该位置的信息。

地图是主ul id="map"的背景图，每个位置都是一个li。该位置通过 css 使用 top 和 left 来定位。

#map 是相对定位的，工具提示是绝对定位的。

我的标记如下：

<ul id="map">
<li><a href="#" class="harewood tip_trigger"><img src="images/marker.gif" width="12" height="12" alt="" /> <span class="tip"><img src="images/thumb.jpg" width="143" height="107" alt="" />Title<br />Click marker for details</span></a></li>

我可以使用 jQuery 显示和隐藏 .tip 跨度，没有问题，但我想获取父级 .tip_trigger 的位置，并将工具提示从光标偏移，例如 10px。

我该如何修改下面的jquery代码？

$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){

var pos = $("#map").position();  
var width = $(".tip").width();

    tip = $(this).find('.tip');
    tip.show(); //Show tooltip
    tip.css({"left": (pos.left + width) + "px","top":pos.top + "px" });

}, function() {
    tip.hide(); //Hide tooltip
});
});

我已经搞乱这个有一段时间了，尝试过 jquery 文档，但无法弄清楚。

Answer 1

algiecas 是对的，我通常会在 each 中添加一个额外的步骤，

如下所示：

$(document).ready(function() {
//Tooltips
$(".tip_trigger").each(function () {
 $(this).hover(function(){

 // assuming you give the image the class marker
 var pos = $(this).find('marker').position();  

    tip = $(this).find('.tip');
    var width = tip.width();
    tip.show(); //Show tooltip
    tip.css({"left": (pos.left + width) + "px","top":pos.top + "px" });

 }, function() {
    tip.hide(); //Hide tooltip
 });


});
});

Answer 2

您可能应该使用 .tip_trigger 的位置，而不是整个 #map

var pos = $(this).position();