Cara Membuat Tooltips Gelembung 100% Menggunakan Css

Tutorial Blogspot - Pada posting sebelumnya saya telah membahas Cara Membuat Share Melayang yang berlabel Tutorial Blogspot dan pada kesempatan kali ini saya juga masih sama membahas label tersebut.

Para blogger biasa nya memanfaatkan cara ini untuk menjelaskan suatu link (Bisa link refferal begitu banyak orang yang mengikuti) yang bertujuan ke halaman lain nya (Hover) secara otomatis buble tooltips akan muncul dengan semua penjelasan yang ditulis tetapi banyak para blogger yang mengecam bahwa trik ini menyebut java sript yang nanti nya akan membebani blog dengan ukuran yang besar.Yah trik ini murni menggunakan kode css sebagai kode panggilan nya,untuk demo nya silahkan sobat lihat gambar dibawah ini :

Sekarang silahkan perhatikan kode css berikut :

/*———- balon tips ———–*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}

a.bt span{ display: none; }

/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}

a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}

a.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqVKvRUK2HIEMDPj5lrfXEP4jtJ32JpgQ0qo6f0yrbonL71Pxol10fuYEB7X6AS622NGDc7nBIfzwKr3jvBzuaQ6aUCk6Q3LrEjBm2jZ7gSTiY2brzTT2vt25kSUMsbR6DidC-v0a3so/) no-repeat top;
}

a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPeqhBYkVAUSSK1-0ZUiDIDNr3trNmaYte5V9ZI8A8xzbvNmI41EfeQPwCfBaR-BktERcI1Ntm6Wl3yWvGbZIRk5dKpGWtAwWcHC1IbxW9ZDDolOpDTGKb_9TwcW41CE9uS4JnShOjom8/) repeat bottom;
}

a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqVKvRUK2HIEMDPj5lrfXEP4jtJ32JpgQ0qo6f0yrbonL71Pxol10fuYEB7X6AS622NGDc7nBIfzwKr3jvBzuaQ6aUCk6Q3LrEjBm2jZ7gSTiY2brzTT2vt25kSUMsbR6DidC-v0a3so/) no-repeat bottom;
}

/*———- balon tips END———–*/

Cara Untuk menggunakan:
1. Link yang telah dibuat di kelas deklarasi diberikan = "bt".
Link dalam kode HTML terlihat seperti <a ini href="http://dindingcoret.com"> </ a> Setelah diberi deklarasi akan seperti ini: <a href="http://dindingcoret.com"> < / a>
2. Menyatakan balontips. Panggilan balontips dengan menulis kode <span="balontips"> </ span>. Masukkan hubungan antara kode.
3. Panggil gambar di atas dengan mengetik <span="atas"> </ span>. Masukkan kode antara "balontips".
4. Panggil tengah gambar dengan mengetik <span="tengah"> </ span>. Masukkan kode antara "balontips" di bawah kode "atas". Tempat ini sobat sobat menulis komentar.
5. Panggil gambar di bawah ini dengan mengetikkan <span="bawah"> </ span>. Masukkan kode antara "balontips" di bawah kode "tengah".
Contoh kode dapat ditemukan di sini:
<a href=" URL "> Sobat
Judul di sini ..
<span>
<span>
</ Span>
<span>
Description here ..
</ Span>
<span>
</ Span>
</ Span>
</ A>

Sumber : Zoom Blog