jQuery Плавающая коробка, содержащая имя

Question

Может ли кто-нибудь указать мне правильное направление для учебника или аналогичного кода, создающего тот же эффект, что и на этом снимке экрана с Facebook:

При наведении курсора на изображения отображается имя пользователя.

Я бы хотел использовать 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 не составит труда изменить на свой собственный.

Также вы можете посмотреть hoverIntent и другие методы организации очередей. Это ОЧЕНЬ ПРОСТОЙ макет, и его нужно улучшить для живого окружения

Answer 2

Ближайшая библиотека для достижения этого эффекта с помощью jQuery будет tipsy