Cara Membuat Tooltip Keren...

Sebelumnya saya sudah menulis tentang Link Popup windows     yaitu sebuah jendela munculan ketika di klik sebuah link.
Read More...Read More...   yang fungsinya hampir sama dengan tooltip ini.

Tooltip yang saya gunakan ini fungsinya untuk menyembunyikan sebuah keterangan singkat  (hampir sama dengan "tag-title" hanya dengan tooltip ini tampilannya lebih kerendan bisa dimodifikasi dan bisa ditambah link)   didalam tulisan, boleh diarahkan mouse jika dibutuhkan, dan jika tidak, bisa tetap dibiarkan tersebunyi oleh pembaca.

Saya sendiri pernah berbulan-bulan browsing dengan berbagai kata kunci tentang Link PopUp, popup
windows, popup posting di blog, untuk mencari sebuah PopUp yang simpel, tidak memberatkan loading, mucul ketika disentuh mouse, bisa memasukkan link dengan jendela yang sama, dan yang terpenting sesuai dengan apa yang saya suka.

Seperti gambar inilah yang saya butuhkan, dan ternyata ini bukanlah popup tapi "tooltip" (Anda boleh cari di Google tentang tooltip.
Tooltip yang saya gunakan ini fungsinya untuk menyembunyikan sebuah keterangan didalam tulisan, boleh diarahkan mous jika dibutuhkan, dan jika tidak, bisa tetap dibiarkan tersebunyi oleh pembaca.
Read More...).

Akhirnya pencarian saya selama berbulan-bulan ditemukan juga didalam sebuah blog di internet yang saya lupa nama blognya, tapi sekarang saya lebih banyak menggunakan Tooltip Tersebut.
Ini dia code script-nya.
Anda boleh coba dengan menempatkan didalam tulisan anda,

<span class="icontooltip tooltip"><span class="tooltipblog">INI ADALAH TOOLTIP
<a href="URL">Read More...</a></span></span>

Tapi harap diperhatikan, kode tooltip diatas belum selesai.
Anda harus menambahkan kode css kedalam template html
Copy kode dibawah ini dan paste-kan kedalam teplate anda diatas ]]></b:skin>

.icontooltip {
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
MozOpacity: 0.;
padding: 0 4px 0 0;
background: url('https://3.bp.blogspot.com/-TKof60bo7CU/V4S329AcOuI/AAAAAAAAKVQ/VnV0I4OTam8Ku4748Nu627dMA_XN-6VHgCLcB/s1600/icontooltip.png')

no-repeat; }
.tooltipblog { display: none; width: 400px; position: absolute; padding: 10px; margin: 4px 0 0 4px; top: 0; left: 6px; border: 3px solid #cc6611; border-radius: 0 8px 8px 8px; background: #bedffe; font-size: 12px; box-shadow: 0 1px 2px -1px #21759B; z-index: 999; }
.tooltip { color:#000; background-position: 0 0; }
.tooltip
.tooltipblog { border-color: #cc6611; background-color: #fff; box-shadow-color: #21759B; }
.icontooltip:hover
.tooltipblog { display: block; }

Coba lihat kembali hasil dari popup tooltip tersebut