jQuery Floating box containing name

Question

Could someone point me in the right direction for a tutorial or similar code creating the same effect as in this screenshot from Facebook:

When I hover over the images, their username is shown.

I'd like this using jQuery.

Answer 1

http://jsfiddle.net/T3xCK/

CSS:

.profile{position:relative; width:100px; height:100px; background:#FF0000; float:left; margin:10px;}

.profile .username{position:absolute; top:-30px; left:0; background: rgba(0,0,0,0.7); display:none; width:100px; height:30px;}

JS:

$('.profile').hover(function(){
    $(this).children('.username').fadeIn();
}, function(){
    $(this).children('.username').fadeOut();
});

HTML

<div class="profile">
    <div class="username"></div>
</div>
<div class="profile">
    <div class="username"></div>
</div>
<div class="profile">
    <div class="username"></div>
</div>

CSS won't be hard to change to your own.

Also you may want to look at hoverIntent and other queuing methods. This is a VERY SIMPLE mockup and should be improved upon for a live environment

Answer 2

The closest library to achieve this effect with jQuery would be tipsy