Tooltip Dengan Animasi keren

Author : Unknownuntuk mengenal lebih jauh tentang mas mahfid silahkan klik link Info Blog

orang yang selalu ingin tahu ,mencoba sesuatu yang di anggap orang lain sulit dan berusaha untuk menjadi bisa Sobat sedang membaca artikel tentang Tooltip Dengan Animasi keren. Silahkan tinggalkan jejak di kolom Komentar untuk mempermudah Unknown berkunjung kembali ke blog sobat.

Berkreasi memang tidak ada habis nya bagaimana tidak...? seperti yang akan Info Blog berikan pada pertemuan kali ini .
Saya kira sobat semua sudah tahu dengan Tooltip....!! Yach itu lho keterangan yang akan muncul jika mendekatkan cursor atau mouse pada sebuah link contohnya seperti ini..coba sampean arahkan cursor/mouse kearah link di samping ini Contoh Tooltip sederhana yang saya praktekan barusan adalah contoh tooltip yang sangat sederhana jika ditulis dalam bentuk html seperti ini

<a href="#"title="nah yang nongol ini yang namanya tooltip">Contoh Tooltip sederhana</a>

Coba sobat perhatikan text yang berwarna merah ...tulisan itulah yang akan keluar jika cursor/mouse kita dekatkan ke atas link .dari bentu sederhana tersebut ternyata masih bisa kita modifikasi sedemikian rupa hingga bisa menjadi lebih keren ,tentunya hal tersebut tidak akan pernah terjadi tanpa bantuan dari kode CSS 3 keyframe Animation .Untuk mempersingkat waktu mari kita jabarkan caranya satu persatu.

1. Silahkan sobat download lengkap dulu template untuk menjaga kemungkinan ada kesalahan saat penempatan kode Nantinya .
2. Cari Kode ]]></b:skin> Lalu tempatkan kode Css3 berikut tepat di atas nya

   a.tooltip{
   position:relative;
   }
   a.tooltip span{
   display:none;
   }
   a:hover.tooltip span{
   background:#FFFFCC;
   padding:10px 15px;
   width:300px;
   height:auto;display:block;
   position:absolute;
   left:10px;
   top:20px;
    -webkit-box-shadow: 10px 1px 5px 5px rgba(6, 4, 8, 10);
   box-shadow: 10px 1px 5px 5px rgba(6, 4, 8, 10);
   color:#000;
   z-index:100;
   border:1px solid #999;
   text-decoration:none;
   font-weight:normal;-moz-animation:nongol 1s forwards; /* Firefox */
   -webkit-animation:nongol 1s forwards; /* Safari and Chrome */
   -o-animation:nongol 1s forwards; /* Opera */
   }
   @-moz-keyframes nongol /* Firefox */
   {
   0%   {left:400px;opacity:0}
     
   100% {left:75px;}
   }



3. Lalu Save Template,untuk pemanggilan kode  HTML nya gunakan kode berikut



<a href="alamat yang dituju" class="tooltip">Judul Link <span>Teks yang akan ditampilkan pada tooltip Teks yang akan ditampilkan pada tooltip</span></a>

Jika tutorial di atas sobat lakukan seperti di atas maka hasilnya akan seperti contoh di bawah ini
Nama Anchor Link Teks yang akan ditampilkan pada tooltip Teks yang akan ditampilkan pada tooltip

Semoga tutorial tentang cara membuat tooltip dengan animasi keren bermanfaat buat sahabat semua