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

【问题标题】：jQuery /CSS - get position of relative element, position tooltip accordinglyjQuery / CSS - 获取相对元素的位置，相应地定位工具提示
【发布时间】：2011-07-14 12:53:55
【问题描述】：

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

地图是主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 的位置，并将工具提示从光标偏移 10 像素。

我将如何修改下面的 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 文档，但无法弄清楚。

【问题讨论】：

标签： javascript jquery css tooltip

【解决方案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
 });


});
});

【讨论】：

谢谢大家，感谢您抽出宝贵时间查看此内容。我应该补充一点，#map 具有设定的高度和宽度，因为标记的数量约为 20，所有标记都绝对位于地图上的各个位置。使用 Frank 提供的代码，工具提示不是相对于标记，而是相对于地图。事实上，悬停时显示的所有工具提示都在完全相同的位置。
var pos = $(this).position();给你每个tip_trigger的位置，它不应该有相同的值，但添加一些alert(pos);调试你的javascript。我不明白您希望工具提示出现在哪个元素上
谢谢弗兰克。如果我弹出警报（pos）；进入悬停功能它给了我[对象对象]。工具提示应该在 li 内绝对定位的 marker.gif 上。我提供的是一个代码 sn-p，还有大约 20 个其他标记，位于不同的位置。我希望我能给你一个 url，但它是一个开发服务器。这是一个屏幕截图：link
好的，然后使用： var pos = $(this).find('img').position();相反，或者更好的是，将 class="marker" 添加到标记图像并使用 var pos = $(this).find('.marker').position();
完美，非常感谢弗兰克，这正如我所愿，并且在此过程中也学到了一些东西。谢谢。

【解决方案2】：

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

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

【讨论】：