Search code examples
jqueryhtmlcssjquery-pluginstipsy

Tipsy on multiple classes


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


Solution

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

    That should make it work?