Cara Membuat Bubble Tooltips Dengan CSS Seri 1

Jalan-jalan menelusuri gemerlapnya dunet (dunia internet) tidak sia-sia. Buktinya pada hari ini Saya dapat " berbagi " kepada Sobat semua tentang Cara Membuat Bubble Tooltips Dengan CSS yang pembuatannya sangat simpel seperti pada umumnya bila kita menggunakan kode CSS. Sebelumnya, seperti biasa blog ini selalu menusahakan setiap tutorialnya disertai dengan contohnya. Tujuannya hanya satu agar tutorial ini benar adanya dan Anda bisa melihat terlebih dahulu sebelum membuatnya. Sorot atau arahkanlah cursor Anda pada link-link yang ada di blog ane :

Untuk membuatnya, langkahnya sebagai berikut :

1. Pertama masuk ke Edit HTML.
2. Carilah tag </head>
3. Letakkan di atas tag </head> ini
kode css berikut lalu simpan template Anda.

<style type="text/css">
body{font: 14px Arial,sans-serif; background: transparent; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
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.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0dkMoGQh1UgQqqvBCB3FxKzFoNsUQUY-NKOTHcZYl_4wKUG_X5xJCWYnob2MidYGtEZ8CUvV7qiCasmVj99ll1J7XgaDEd0c0g_GmbqHdqzAYBEVYn75INHtqtKuHIZzNvoMo0skykE/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSu-t0la4LqQzztl7Kg-rLOvpjvAVOfbBGrk_MECHIzo0C-rR02XQYwcIeB_IZbQ-V9aGOZFNIBwHv_Zd8H0DQdCz-d5mAnPIhYF26sZRkfcpAc_JG7ZT4lvIWYDnEBDUpEiDxoLBkG3k/) repeat bottom; 
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0dkMoGQh1UgQqqvBCB3FxKzFoNsUQUY-NKOTHcZYl_4wKUG_X5xJCWYnob2MidYGtEZ8CUvV7qiCasmVj99ll1J7XgaDEd0c0g_GmbqHdqzAYBEVYn75INHtqtKuHIZzNvoMo0skykE/) no-repeat bottom;
}
</style>

4. Penggunakan kode pada linknya, sisipkan
kode class="tt", class="tooltip", class="top",
class="middle" dan class="bottom"
pada setiap link Anda.

Contohnya seperti ini :

<a href="URL Anda di sini" class="tt">Keterangan link<span class="tooltip"><span class="top"></span><span class="middle">Teks tooltipsnya di sini</span><span class="bottom"></span></span></a>

Selamat mencoba, good luck!

---

---

Artikel Terkait: