我有一张地图显示了各种位置,当它们悬停时会在光标旁边显示工具提示,显示有关该位置的信息.

地图是主要ul id =“map”的背景图像,每个位置都是li.该位置由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文档,但是无法搞清楚.

解决方法:

algiecas是对的,我通常会为每个添加一个额外的步骤

像这样：

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


});
});