Tipsy on multiple classes

Question

I'm trying to use TIpsy http://plugins.jquery.com/project/tipsy to show usernames when hovering over linked images.

Here's my HTML for the linked images:

<div id="pic_list_wrap">
<a href="luke" title="luke" class="user_tile"><img src="http://graph.facebook.com/543270572/picture?type=square" class="user_pic" /></a>
<a href="amr" title="amr" class="user_tile"><img src="http://graph.facebook.com/504184020/picture?type=square" class="user_pic" /></a>
</div>

As you can see, I'm using the same class, because I want the names to appear differently for each image.

Sadly, I can't seem to get it to work on an individual basis for classed items, it seems to only work for items with individual IDs.

Here's my jquery Code:

// Show username above each .user_tile image
    $('.user_tile').tipsy({gravity: 's'});

The issue is that, the "tip" appears next to only the first '.user_tile' element.

Edit:

As you can see from this image, the 'Tip' is no appearing above the relevant images.

enter image description here

score 2 · Accepted Answer · answered Oct 14 '11 at 10:39

2

$('.user_tile').each(function(){
    $(this).tipsy({gravity: 's'});
});

That should make it work?

answered Oct 14 '11 at 10:39

rickyduck

4,030
14
58
93

Sadly this isn't working, it seems to produce the same behaviour – Luke Oct 14 '11 at 10:45
Can we have a link to the page or a js fiddle if poss? – rickyduck Oct 14 '11 at 10:56
http://jsfiddle.net/3UuYC/3/ There it is, it doesn't link to the tipsy arrow image, but ignore that :) – Luke Oct 14 '11 at 11:05
1

Instead of styling the `img`, style the `a`, like so: http://jsfiddle.net/3UuYC/5/ – rickyduck Oct 14 '11 at 11:11
Why didn't I think of that! Thank you so much! :) – Luke Oct 14 '11 at 11:15

Marco Johannesen · Answer 2 · 2011-10-14T10:41:47.193

1

It seems its enough to call it on the "parent" element.

So you should be able to do:

// Show username above each .user_tile image
    $('#pic_list_wrap [title]').tipsy({gravity: 's'});

And then it should activate on all children of that ID

Could you link to ur example? And remember its the TITLE attribute, not "original-title". (So im hoping ur pasting the rendered HTML, not source)

edited Oct 14 '11 at 10:41

answered Oct 14 '11 at 10:35

Marco Johannesen

13,084
6
31
36

This would only activate 1 tipsy with 1 lots of content, making it monotomous throughout the hovers, and restricted to one username over all of the `.user_tile`'s – rickyduck Oct 14 '11 at 10:40
@MarcoJohannesen Thank you for the code. With this code, the correct captions are showing, but the 'Tip' is appearing in the same position for the images. Please see the edit, this shows your code in action. – Luke Oct 14 '11 at 10:57
It seems to be because the images load later and tipsy thinks they are width:0 and then place the tooltip on this. Does your images have a fixed width? (https://github.com/jaz303/tipsy/issues/34) – Marco Johannesen Oct 14 '11 at 11:05
http://jsfiddle.net/3UuYC/3/ There it is, it doesn't link to the tipsy arrow image, but ignore that :) – Luke Oct 14 '11 at 11:05
Thanks for the link! Its because of the float on the image it seems. see here http://jsfiddle.net/3UuYC/4/ – Marco Johannesen Oct 14 '11 at 11:08

Tipsy on multiple classes

2 Answers2