Cara memasang tooltip dengan CSS Code

Cara memasang tooltip dengan menggunakan CSS dan JQuery

Tooltips adalah sebuah komponen grafis yang biasanya digunakan untuk memunculkan penjelasan yang lebih lengkap dari sebuah
kalimat ataupun memunculkan popup sebuah gambar. Tooltip akan muncul ketika mouse diarahkan kepada sebuah kalimat yang telah mengandung tooltip.  Dengan menggunakan tooltip maka akan mempersingkat kalimat yang dipakai, karena point-point penting akan dapat dimunculkan ketika anda mengarahkan mouse kesebuah kalimat penting tersebut.

Bagaimana cara memasang Tooltip di Blog

Berikut code tooltip dengan CSS

/*---------- start bubble tooltip Blogerasia.blogspot.com-----------*/ 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/AVvXsEhGHNXvkDtlQ_it6w6BUQS9-vUpwtbJ6JGpfn6pOluu_8kw1KT7R8XGE1EM1j4DDQOsCLqq7hF3f4f9Hf4N5Lc-_l5WMrDScmWvTpp4RmPawiJ5eqmJ2QABHYikbMf549jr9q4ZElKwZbY/s320/bubble-712378.gif) 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/AVvXsEhr-l17n4QOOqhGI7NWXqdPBJ_nzHbpAUXKogCbKR7zKYzKtjCGJYAYa6bs7woVUxa-hRHsmskHMhbKYEGyFinH_DZbFxqhADHTHwKd1TAAtElfq-__60qVj9es5erXVV2rgrndiOG5D_I/s320/bubble_filler-711451.gif) repeat bottom; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGHNXvkDtlQ_it6w6BUQS9-vUpwtbJ6JGpfn6pOluu_8kw1KT7R8XGE1EM1j4DDQOsCLqq7hF3f4f9Hf4N5Lc-_l5WMrDScmWvTpp4RmPawiJ5eqmJ2QABHYikbMf549jr9q4ZElKwZbY/s320/bubble-712378.gif) no-repeat bottom; } /*---------- end bubble tooltip blogerasia.blogspot.com-----------*/

Copy Code CSS diatas kemudian anda masuk ke Template Blogger – Edit HTML – cari kode ]]></b:skin> untuk mempercepat pencarian tekan CTRL+F  kemudian ketikan ]]></b:skin> Setelah ketemu, paste code tersebut di atas ]]></b:skin> kemudian SAVE.  Anda dapat mengganti semua code yang berwarna merah sesuai dengan yang anda inginkan, seperti warna, posisi, background, lebar tooltip, dan posisi tulisan dalam tooltip.

Untuk memunculkan tooltip dipostingan, pada kolom posting, masuk ke kolom HTML kemudian pasang Code berikut 

<a href="#" class="tt">Kata-Kata Penting<span class="tooltip"><span class="top"></span><span class="middle">Penjelasan dari kata-kata penting tersebut</span><span class="bottom"></span></span></a>

Ganti Kata yang berwarna merah dengan kata-kata penting anda

Berikut contoh Tooltip Tahan mouse pointer anda Demikian penjelasan mengenaik cara memasang Tooltip Semoga bermanfaat