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 Anda 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 mengusahakan setiap tutorialnya
disertai dengan contohnya. Tujuannya hanya satu agar tutorial ini benar
adanya dan Anda bisa melihat terlebih dahulu sebelum membuatnya.

Sorotlah atau arahkan cursor Anda pada link-link yang ada di bawah ini :

Membuat Efek Pintu Geser jQueryCara membuat efek pintu geser ke bawah dengan JQuery


Membuat Tombol Show & HideCara membuat tombol show & hide


Membuat Keterangan Gambar jQueryCara membuat keterangan gambar dengan jQuery



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/AVvXsEh9Abbgk5RUpgQRm9Zn0DMHc7hUYi4Cxa_uOD3vxKUGJCuJgi8id5GexI1vslZBcOUECkegIhDmh38pGxscGDj_ECQoMlCwFMAHnMA_TEnBDyyDMX54GWYowpXn4TvzuAmS5dVXIuaI4OU/) 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/AVvXsEi-WbQiR2T-ykLSbWufAX6690ZJGJbLailGPJgIwJxT_OZ_sD4kiYK9vuT-z41uHZvk_EvLR7j5EZwke56xtGbgJhzjr7FSOJ67XPw8zgElKDKFL1cBgS5OCPcei3AuCG6VMCF-DN8db08/) repeat bottom; 
}
a.tt:hover span.bottom{
 display: block;
 padding:3px 8px 10px;
 color: #548912;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Abbgk5RUpgQRm9Zn0DMHc7hUYi4Cxa_uOD3vxKUGJCuJgi8id5GexI1vslZBcOUECkegIhDmh38pGxscGDj_ECQoMlCwFMAHnMA_TEnBDyyDMX54GWYowpXn4TvzuAmS5dVXIuaI4OU/) 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 yang Anda miliki.

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!