Cara Membuat Tooltip Menggunakan CSS Sederhana ~ All About All

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.

langsung saja ke cara membuat tooltip menggunakan CSS sederhana :

Login ke akun Blogger.
Pada Halaman Dasboard Cari dan klik Rancangan.
Setelah halaman baru terbuka, klik Edit HTML.
Lakukan Backup Template.
Cari kode ]]></b:skin>
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://anti-fool.blogspot.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;}