Question about siblings() and tooltip
Hello,
I'm trying to create a tooltip from a simple list. When i hover over a class "tooltip", i want to get the corresponfding sibling div
Here's a sample of the code
HTML:
--------------------
<ul>
<li>
<a class="tooltip" href="">thumbnail 1</a>
<div class="container-tooltip" style="display:none;">
<img src="..." alt="" />
<p>text goes here</p>
<p>more text</p>
</div>
</li>
...
<li><a class="tooltip" href="">thumbnail 8</a><div>...</div></li>
...
</ul>
jQuery:
--------------------
//tooltip
$("a.tooltip").hover(function(e){
var current = $(this);
$(current).siblings("div.container-tooltip").css({display:"block"}).hide().fadeIn(300);
},
function() {
$(current).siblings("div.container-tooltip").css({display:"none"});
e.preventDefault();
}
);
$("a.tooltip").mousemove(function(e){
var current = $(this);
var mousex = e.pageX - 210;
var mousey = e.pageY - 35;
$(current).siblings("div.container-tooltip").css({top:mousey, left:mousex});
e.preventDefault();
}
);
For some reason, they all show up at the same time...
Is siblings() the right function to use?
Thanks
Marco