Create Simple Animated CSS3 Tooltip

membuat Tooltip tak harus menggunakan javascript. Kini, bahkan anda bisa membuat tooltip yang disertai animasi hanya menggunakan kode css3. Sangat simple dan mudah juga menggunakannya. Anda hanya perlu menambahkan tag span di antara tag pembuka dan penutup "a".

Tooltip animasi css3 bisa tercipta berkat penggunaan css3 transition yang dipadukan dengan beberapa kode css lain, seperti margin, padding, width serta opacity effect. Anda bisa membandingkan bagaimana bentuk tooltip yang hanya menggunakan kode css dan yang menggunakan kode css3. Ini tooltip yang dibuat hanya menggunakan kode cssTooltip yang hanya dibuat menggunakan kode css juga mempunyai fungsi sama dengan tampilan tak berbeda juga jika dibandingkan dengan tooltip javascript. Hanya saja tooltip seperti ini tak punya efek-efek khusus. Tampila apa apa adanya, gitu, lhoh...!!, sedang tooltip yang ini dibuat menggunakan kode css3Tooltip css3 mempunyai efek tertentu bergantung desain yang direncanakan. berbagai bentuk animasi dapat kita ciptakan. Tootip ini tanpa satupun javascript. yang dipadukan juga dengan beberapa kode css. Dalam 2 demo tersebut terlihat jelas bahwa sebenarnya ke 2 macam tooltip tersebut mempunyai desain dasar yang sama namun menjadi terlihatberbeda karena pengarush css3.

Kode CSS :

a.GRttips{
        font-weight:bold;
        position:relative;
        color:#0000CC;
        text-decoration:none;
}
a.GRttips:hover{
        color:#FF0000;
}
a.GRttips span{
        transition:1s 0.5s ;
        -o-transition:1s 0.5s;
        -moz-transition:1s 0.5s;
        -webkit-transition:1s 0.5s;
        -ms-transition:1s 0.5s;
        opacity:0;
        filter:alpha(opacity=0);
        text-align:center;
        font-weight:600;
        position:absolute;
        bottom:0;
        left:10px;
        font-size:12px;
        font-family:Arial;
        z-index:-10;
        width:180px;
        overflow:hidden;
        border:4px double #999;
        color:#000;
        text-shadow:1px 1px 1px #000;
}
a.GRttips:hover span{
        z-index:999;
        opacity:1.0;
        filter: alpha(opacity=100);
        display:block;
        bottom:30px;
        color:#eee; /* original code by : gubhugreyot */
        padding:10px;
        border-radius:6px;
        background:#a86b78;
        background:linear-gradient(top, #a86b78 0%,#3f0108 9%,#910221 98%);
        background:-o-linear-gradient(top, #a86b78 0%,#3f0108 9%,#910221 98%);
        background:-ms-linear-gradient(top, #a86b78 0%,#3f0108 9%,#910221 98%);
        background:-moz-linear-gradient(top, #a86b78 0%, #3f0108 9%, #910221 98%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#a86b78), color-stop(9%,#3f0108), color-stop(98%,#910221));
        background:-webkit-linear-gradient(top,  #a86b78 0%,#3f0108 9%,#910221 98%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a86b78', endColorstr='#910221',GradientType=0);
}

xHTML css3 Tooltip :

<a class="GRttips" href="http://gubhugreyot.blogspot.com">gubhugreyot<span>Panduan dan Tutorial Blogger</span></a>

Keterangan :

• Gunakan class="GRttips" untuk menampilkan tootip.
• Kode berwarna biru = URL
• Sisipkan tag span di dalam link.
• Letakkan teks tooltip yang berwarna orange dalam tag span.
• Text Link berwarna kuning.
• Tooltip dapat digunakan di halaman posting atau bagian blog yang lain.

Cara Menggunakan :

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard):
   Cari dan klik "Rancangan (Design)".
3. Setelah halaman baru terbuka, klik "Edit HTML".
4. Lakukan Backup Template.
5. Cari kode ]]></b:skin>
6. Copy dan paste-kan kode css di atas kode ]]></b:skin>
7. Klik "Simpan Template (Save Template).
8. Lanjutkan untuk menggunakn xHTML css tooltip.