/*
 * Направете си набързо Tooltip с jQuery
 * Author: Георги Калайджиев
 * Web: http://joro.me/blog/
 * e-Mail: ripsterbg[at]gmail[dot]com
 * Authors e-Mail: authors[at]fridaycode[dot].net
 * Tutorial: http://fridaycode.net/simple-tooltip-with-jquery/
 */

$(document).ready(function () 
	{	
		$('div.friends a').hover(function () {
			var userInfo = $(this).next().html(); //Взимаме текста (заедно с таговете) от елемента до <a>, който в случая е <span>.
			var tooltipBox = $('<div class="tooltip"></div>'); //Създаваме <div>.
			$(this).parent().append(tooltipBox); //"Закачаме" този <div> към съответното <li> от списъка, за да е по-подредено.
			$(tooltipBox).animate({'opacity' : 'toggle', 'top' : '80px' }, 200).html(userInfo).append('<div class="arrow"></div>'); //Добавяме малко ефекти на Tooltip-а и вкарваме информацията в него. Накрая му добавяме и лека козметична заигравка - стрелкичката.
		}, function(){
			$('div.tooltip').remove(); //При hoverOut изтриваме Tooltip-a.
		});
	});