ToolTip

HTML

<a title="Print Results" href="#">Print results</a>
    <a title="Print Resultbfbfbfgbfs 2" href="#">Print resuffffflts 2</a>

CSS

body{
padding:30px;
}
.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');
    var tooltip = $('.tooltip');
    tooltip.fadeTo(300, 0.9).children('.tipBody').html( tip );


    
    var el = $(this),
        pos = el.position(),
        w = el.outerWidth(),
        newtop = pos.top - tooltip.outerHeight() ,
        newleft = pos.left + (w/2) - (tooltip.outerWidth()/2);
//set position
$('.tooltip').css('left', newleft )  ;
$('.tooltip').css('top',  newtop );




hideTip = false;
});