make Simple Tooltip With jQuery

Sebelum memulai save image ini di dalam folder /images
di dalam root index.html

arrow-down.png

tooltip layak nya seperti ini ...bisa di dapat di toko buku terdekat :hammer:
loh malah ngelantur
toolip seperti itu bisa didapat dengan script jQuery sederhana
dengan script sebagai berikut.

$(document).ready(function(){
$('.tooltip').hover(
    function(){
        var posix = $(this).position();
        var tops = posix.top + - 35;
        var elemx = $(this).attr('title');
        $(".root").append('<div class="ballonx" style="position:absolute;opacity:0.8;left:'+ posix.left +';top:'+ tops +';"><div class="text">'+ elemx +'</div><div class="arrow"></div></div>');
    },
    function(){
        $(".ballonx").remove();
    });
});

dengan StyleSheet CSS seperti ini

.text{
    background:#000;
    color:#fff;
    padding:5px;
}
.arrow{
    background:url(images/arrow-down.png);
    width:15px;
    margin-left:10px;
    height:10px;
    margin-top:-3px;
}

dan contoh HTML seperti ini

<a href='#' class='tooltip' title='bukan ini bukan link !'>ini link ?</a> 

jangan lupa buat

<div class='root'></div>

di sembarang tempat

maka akan menghasilkan result seperti ini
ini link ?

terimakasih.... :D