Membuat tooltip terkeren dengan css3

Membuat tooltip dengan hanya bermodalkan css pasti gak kalah menarik apalagi jika browser anda mendukung css3 pasti tooltip ini akan telihat sempurna karena tooltip ini banyak menggunakan kode css3 seperti apakah bentuk tooltip ini bentuknya ya seperti pada screenshot itu / gambar di atas itu jika penasaran silahkan lihat demonya.

DEMO

Jika browser anda mendukung css3 maka akan terlihat pergerakan lembut tooltip saat muncul itu di peroleh dari css opacity dan trasition nah dari pada berlama - lama anda langsung saja tambah Gadget HTML/Javascript dan simpan kode di bawah ini di dalamnya.

<a class='tooltipz' href='url'>Disini judul link anda <span>Disini tulis judul tooltip anda atau deskripsi dari link anda</span></a>

<style>
a.tooltipz {
    display: inline;
    position: relative;
    text-decoration: none;
    font: normal 14px/20px serif;
    }

a.tooltipz > span {
    position: absolute;
    margin: 0 0 0 10px;
    padding: 5px;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    width: 300px;
    overflow: hidden;
    background: #aaa;
    color: #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 8px #000;
    -webkit-box-shadow: 0 0 8px #000;
    box-shadow: 0 0 8px #000;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 2px solid #222;
    }

a.tooltipz:hover > span {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
</style>

Jika anda ingin menggunakan link lebih dari satu, cukup anda tambah lagi kode html link yang seperti ini

<a class='tooltipz' href='url'>Disini judul link anda <span>Disini tulis judul tooltip anda atau deskripsi dari link anda</span></a>

Mudah bukan selamat berkreasi.