CSS: link-tooltip.css

link-tooltip.css

<style type="text/css">
    a
    {
        color: #000;
        text-decoration: none;
    }
    a:hover
    {
        color: red;
        position: relative;
    }
    a[title]:hover:after
    {
        content: attr(title);
        padding: 4px 8px;
        color: #333;
        position: absolute;
        left: 0;
        top: 150%;
        white-space: nowrap;
        z-index: 20px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0px 0px 4px #222;
        -webkit-box-shadow: 0px 0px 4px #222;
        box-shadow: 0px 0px 4px #222;
        background: #eee;
        background: -webkit-gradient(linear,left top, left bottom, from(#eeeeee),to(#cccccc));
        background: -webkit-linear-gradient(top, #eeeeee, #cccccc);
        background: -moz-linear-gradient(top,  #eeeeee,  #cccccc);
        background: -o-linear-gradient(top, #eeeeee, #cccccc);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#cccccc');
    }
</style>

<a href="#" title="tttttttttttttttttttt">asdasda</a>