Kali ini shevy mau coba share cara membuat Tooltip dengan menggunakan CSS tanpa Javascript, jadi tidak akan memberatkan loading blog. Untuk penggunaan CSSnya shevy menggunakan CSS3 jadi tidak akan support di IE6, dan hanya akan berjalan di IE8, Mozilla 3.5, dan Opera 10, browser lainnya belum di coba.

Beberapa kelebihan Tooltips ini :

• Tidak memberatkan loading blog.
• Full CSS tanpa menggunakan image sebagai background.
• gampang.

Kekurangannya :

• Tidak support Crossbrowser.
• Hanya support dengan browser yang sudah bisa menampilkan CSS3.

Kalo penasaran pengen buat juga, okeh ikutin aja langkah2 dibawah ini :

• Copy script CSS dibawah ini ke dalam web ato blog kamu. Penempatannya untuk blogger silahkan masukan script dibawah diantara script CSS yang lainnya. Atau diatas kode ]]>.

a.Tooltip{
position:relative;
z-index:24;
color:#fff;
font-weight:bold;
text-decoration:none;
}

a.Tooltip span{
display: none;
}

a.Tooltip:hover{
z-index:50;
text-decoration:none;
}

a.Tooltip:hover span{
display:block;
position:absolute;
left:0;
padding: 5px 2px 5px 5px;
width:200px;
min-height:50px;
color:#fff;
font: Georgia, "Times New Roman", Times, serif;
font-size:10px;
font-weight:bold;
text-align: center;
background-color: rgba(60, 132, 198, 0.8);
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
-moz-border-radius:5px;
-webkit-border-radius:5px;
vertical-align:text-bottom;
text-transform:none;
}
a.Tooltip:hover span img {
width:120px;
height:100px;
padding:2px 2px 2px 2px;
text-align:left;
text-transform:none;
border:1px solid #CCCCCC;
}