Cara Membuat Tooltip Menggunakan CSS Sederhana

Cara Membuat Tooltip Menggunakan CSS Sederhana - Tooltip pada sebuah link biasanya merupakan judul/title pada link tersebut yang disisipkan dengan menggunakan atribut title=" " pada tag <a>, namun yang akan kita bahas kali ini adalah tooltip dengan menambahkan tag <span> di belakang nama link yang di buat dengan style khusus menggunakan kode CSS yang bisa dibilang sederhana, walaupun hanya menggunakan Kode CSS sederhana tetapi mampu menghasilkan tampilah yang menarik, jika Anda ingin mengetahui bagaimana tampilan Tooltip Menggunakan CSS Sederhana ini silakan letakan cursor diatas link demo di bawah ini.

D E M Oini adalah contoh tooltip menggunakan CSS sederhana

mari kita langsung ke cara membuat tooltip menggunakan CSS sederhana :

1. Login ke akun Blogger.
2. Pada Halaman Dasboard Cari dan klik Rancangan.
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 bawah ini tepat DI ATAS kode ]]></b:skin>

a.FBZtip{
       font-weight:bold;
       position:relative;
       color:#0000CC;
       text-decoration:none;}
a.FBZtip:hover{color:#FF0000;}
a.FBZtip span{
       text-align:center;
       display:none;
       font-weight:600;
       position:absolute;
       bottom:30px; /* copyright : http://www.febbiez.com */
       left:10px;
       font-family:Arial;
       font-size:12px;
       width:180px;
       padding:10px;
       overflow:hidden;
       border:4px double #999;
       color:#eee;
       border-radius:6px;
       background:#a86b78;
       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%);
       background:-o-linear-gradient(top,  #a86b78 0%,#3f0108 9%,#910221 98%);
       background:-ms-linear-gradient(top,  #a86b78 0%,#3f0108 9%,#910221 98%);
       background:linear-gradient(top,  #a86b78 0%,#3f0108 9%,#910221 98%);
       filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a86b78', endColorstr='#910221',GradientType=0 );  
       text-shadow:1px 1px 1px #000;}
a.FBZtip:hover span{z-index:999;display:block;}

7. Klik simpan template.

untuk cara penerapannya pada link yang akan Anda buat, silakan pergunakan kode xHTML seperti contoh berikut.

<a class="FBZtip" href="http://www.febbiez.com">febbiez<span>Free Download Software Full Version Patch Serial Key Gratis</span></a>

NB: Ganti kode yang berwarna merah dengan url Anda, warna hijau dengan nama link, dan warna biru dengan kata-kata yang akan muncul di tooltip.