views:

110

answers:

2

Say i have 10 small images that i want to use as tooltips. Im assinging them all the same class, '.helper'

Im selecting helper, then calling

mouseenter(function() { $(".helper").stop(false,true).fadeIn(); })

I then want a div to popup, containing some text. This works fine if there's only one tooltip on the page, but as soon as there is more than one, whenever i hover over one, they all appear at the same time.

Have i got something fundamentally wrong?

Comments appreciated.

Thx

+2  A: 

Use this as the selector inside instead of the .helper selector again:

$('.helper').mouseenter(function() {
    // "this" now refers to the image that is being hovered...
    $(this).stop(false, true).fadeIn();
});
Paolo Bergantino
brill thanks alot
maxp
A: 

If you're wondering what the problem was, it was that when you called

 $(".helper")

within your function, you were getting all the elements with class helper, in stead of just the single element you wanted.

cdmckay
Any the only solution is to use 'this' ?
maxp
Yeah, what $(".helper") does is get you all elements with that class. When you do .each(fn), it cycles through each element in the set returned by $(".helper") and sets each one as "this" in the fn.
cdmckay