ToolTip

HTML

<div style="margin-top: 50px">
    <a title="Print Results" href="#">Print results</a>
    <a title="Print Resultbfbfbfgbfs 2" href="#">Print resuffffflts 2</a>
</div>

CSS

.tooltip{ 
    display:none;
    position:absolute;  
    left:50%;
    top:-30px;
    padding:6px;
    background-color:white;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    line-height:1;
    text-decoration:none;
    text-align:center;
    text-shadow:0 0 1px white;
    white-space:nowrap;
    background-color:#f9f2ba;
    border:1px solid #e9d315;
    color:#5b5316;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

JavaScript

var hideTip = false;
var tip;

$(document).click(function(e) {
    if (hideTip == true) {
    $('.tooltip').hide(); 
} 

if (hideTip == true) {
    hideTip = false;
    } else {
        hideTip = true;
    }
});

$('a[title]').click(function(e) {

    //fadetooltip and display information
    $('body').append('<div class="tooltip"><div class="tipBody"></div></div>'); 
    tip = $(this).attr('title');
    $('.tooltip').fadeTo(300, 0.9).children('.tipBody').html( tip );


    
    
//set position
$('.tooltip').css('left', $(this).position().left+($(this).width()/2)-($('.tooltip').outerWidth()/2))  ;
$('.tooltip').css('top',  $(this).position().top-$('.tooltip').outerHeight());




hideTip = false;
});