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

Question

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

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

#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 span，但我想获得父级.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文档，但就是想不明白。

- tjcss

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


});
});

- tmaximini

---

谢谢大家，感谢你们抽出时间来查看这个。我应该补充说明，#map有一定的高度和宽度，因为标记大约有20个，全部绝对定位在地图上的不同位置。使用Frank提供的代码，工具提示并没有相对于标记而言，而是相对于地图。实际上，所有悬停显示的工具提示都在完全相同的位置。 - tjcss

var pos = $(this).position(); 给出了每个tip_trigger的位置，它们不应该有相同的值，但是为了调试你的JavaScript，添加一些alert(pos);。我不确定你想把工具提示放在哪个元素上。 - tmaximini

谢谢Frank。如果我将alert(pos)放入hover函数中，它会给我[object object]。提示应该在li内的绝对定位marker.gif上。我提供的是一个代码片段，还有大约20个其他标记，处于不同的位置。我希望我能给你一个URL，但这是一个开发服务器。这里是一张截图代替：链接 - tjcss

好的，那么请使用：var pos = $(this).find('img').position(); 或者更好的方法是，将class="marker"添加到标记图像中，然后使用var pos = $(this).find('.marker').position(); - tmaximini

非常完美，非常感谢Frank，它的工作方式正如我所希望的，并且在此过程中也学到了一些东西。谢谢。 - tjcss

很高兴能帮忙...顺便推荐一下jQuery插件Tiptip，它可以做很棒的事情（虽然我认为你首先应该自己动手学习）。 - tmaximini

Answer 2

你应该使用 .tip_trigger 的位置，而不是整个 #map。

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

- algiecas