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.
$('.user_tile').each(function(){
$(this).tipsy({gravity: 's'});
});
That should make it work?