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

jQuery /CSS - get position of relative element, position tooltip accordingly

本文关键字：位置 工具提示 元素 CSS 获取 相对 jQuery      更新时间：2023-09-26

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

地图是主地图的背景图像，每个位置都是一个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 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文档，只是不能弄清楚。

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

});
});

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

var pos = $(this).position();
相关文章：