Edit in JSFiddle

	<div id="twarz_div">

		<a href="#glowa" title="Głowa" style="margin: 49px 0 0 77px;"></a>
		<a href="#policzek" title="Tytuł linka<br>z użyciem tagu BR" style="margin: 110px 0 0 90px;"></a>
        <a href="#usta" title="Usta i <b>HTML</b>" style="margin: 123px 0 0 40px;"></a>
	
		<img id="twarz" src="http://krakiewicz.pl/wp-content/themes/alltuts/images/arek_profil_d.jpg">

	</div>
#twarz_div a {
	outline: 0;
	position: absolute; 
	display: block; 
	border-radius: 6px;
	border: 1px solid #000; 
	width: 10px; 
	height: 10px;
	background: #FFD006;
}

.tip {
	position: absolute; 
	display: block;
	border: 1px solid #F1D031;
	background: #FFFFA3;
	padding: 3px 5px 5px 5px;
	border-radius: 3px;
	text-align: center;
    font-family: Arial;
    font-size: 12px;    
}
$(function() {
   
    $('#twarz_div a').hover(function(){
        
        $('#twarz_div').append('<div class="tip">' + $(this).prop('title') + '</div>');
    
        $(this).prop({'title':''});
        
        var tip = new Object();
        
        tip.height = $('.tip').height();

        var position = $(this).offset();
        
        position.top -= 25;
        
        tip.top = 0;
        tip.left = $('.tip').width()/2;
        
        if ( tip.height > 15 ) {
            tip.top = $('.tip').height()/2;
        }
        
        $('.tip').css({'top':(position.top-tip.top) + 'px','left':(position.left-tip.left) + 'px'});
        
    }).mouseleave(function(){
    
        $(this).prop({'title':$('.tip').html()});
    
        $('.tip').remove();
    
    });    
   
    
    
    
    $('#twarz_div a').click(function(){
	
	    alert('Clicked!\n' + $('.tip').text() );
	
    });
    
});