jQuery / CSS - получить позицию относительного элемента, соответственно подсказку позиции - PullRequest
Новая
       4

jQuery / CSS - получить позицию относительного элемента, соответственно подсказку позиции

4 голосов
/ 14 июля 2011

У меня есть карта, показывающая различные местоположения, на которой при наведении курсора рядом с курсором будет отображаться всплывающая подсказка с информацией об этом местоположении.

Карта является фоновым изображением основного ul id = "map", где каждое местоположение является li. Расположение расположено css, используя верхнюю и левую.

Карта размещена относительно, а подсказки расположены абсолютно.

У меня есть разметка: 

<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>

Я могу показать и скрыть диапазон .tip, используя jQuery, без проблем, но я бы хотел получить позицию родительского .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 и просто не могу понять.

Ответы [ 2 ]

2 голосов
/ 14 июля 2011

Альджекас прав, я обычно добавляю дополнительный шаг с 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
 });


});
});
1 голос
/ 14 июля 2011

Вы, вероятно, должны использовать позицию .tip_trigger, а не целое #map

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