jQuery(document).ready(function() {
	// dodajemy element, który będzie zawierał tooltip do ciała dokumentu  
	// oraz odpowiednio go opisujemy stylami
	$ownTooltip = $('<div/>').attr('id', 'own-tooltip')
	.css('position','absolute')
	.css('border', '2px solid #aaa')
	.css('-moz-border-radius', '4px')
	.css('-webkit-border-radius', '4px')
	.css('border-radius', '4px')
	.css('background-color', '#fff')  
	.css('color', '#000')  
	.css('padding', '4px 4px 1px 4px')
	.css('margin', '0px')
	.css('display', 'none')
	.css('z-index', '1000')
	.appendTo('body');
	
	// dla elementu linka o klasie span, który będzie zawierał w sobie atrybut span
	// zmieniamy pozycję tooltipa
	$('a.tooltip:has(span)').live('mousemove', function(e){
		var dY = e.pageY + 15;  
		var dX = e.pageX + 15;
		$ownTooltip.css({'top': dY, 'left': dX}); 
	});
	
	// wyświetlamy tooltipa
	$('a.tooltip:has(span)').live('mouseenter', function(e) {  
		// zatrzymujemy animację
		$ownTooltip.stop(true, true);
		// pobierz tekst z elementu span zawartego w elemencie a
		$ownTooltip.html($(this).children('span').html());
		// i pokaż tooltip z efektem fadeIn  
		$ownTooltip.fadeIn(200);
	});
	
	// ukrywamy tooltipa
	$('a.tooltip:has(span)').live('mouseleave', function() {
		// zatrzymanie animacji
		$ownTooltip.stop(true, true);
		// ukryj z efektem fadeOut  
		$ownTooltip.fadeOut(200);
	});
});