ToolTip

HTML

<br/>
<br/>
<br/>
<br/>
<a title="Print Reasd sad ad sults" href="#">Print results</a>
<a title="Print Resultbfbfbf dasd sad asd asd sa gbfs 2" href="#">Print resuffffflts 2</a>
<a title="Print" href="#">Print resuffffflts 2</a>
<a title="Print Resultbfbfbfgbfs 2" href="#">Print resuffffflts 2</a>
<a title="Print Resultbfbf asd asasd as dasd bfgbfs 2" href="#">Print resuffffflts 2</a>

<br/>
<br/>
<br/>
<br/>
<a title="Print Results" href="#">Print results</a>
<a title="Print Resultbfbfbfgbfs 2" href="#">Print resuffffflts 2</a>
<a title="Print Resultbfbfbfgbfsdad asd sads 2" href="#">Print resuffffflts 2</a>
<a title="Print Resultbfbfbfgbfs 2" href="#">Print resuffffflts 2</a>
<a title="Print Resultbfbfbfgbfs 2" href="#">Print resuffffflts 2</a>

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;
}
a {
    display: inline-block;
}

JavaScript

var hideTip = false;
var tip;

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

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

$('a[title]').click(function(e) {
   
    //Fix Bug
    $('.tooltip').remove(); 
    
    var top = $(this).position().top;
    var left = $(this).position().left;
    
    //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 );
    
    var linkWidth = $(this).outerWidth();
    var tooltipWidth = $('.tooltip').outerWidth();
    
    // SET offSet
    var marginTop = 30;
    
    //Check Left position
    if(tooltipWidth >linkWidth) {
        var marginLeft = (tooltipWidth-linkWidth)/2;
        left = left-marginLeft ;
    } else {
        var marginLeft = (linkWidth-tooltipWidth)/2;
        left = left+marginLeft ;
    }
    
    //Fix Bug
    if(left<0) {
        left = 0;
    }
    console.log(left);
    console.log(tooltipWidth);
     console.log(linkWidth );
    console.log(marginLeft);
    
//set position
$('.tooltip').css('left', left+"px");
$('.tooltip').css('top',  top-marginTop+"px" );




hideTip = false;
});