balon tooltip css

1. Masuk ke rancangan -> EDIT HTML (centang Expand Template Widget)
2. Simpan CSS berikut diatas kode ]]>

#bubblemenu li{ display:inline; float:left; margin-left:10px; cursor:pointer; }

#bubblemenu li >div{ width:150px; min-height:100px; position:absolute; display:inline; margin-left:-70px; padding:5px; visibility:hidden; opacity:0; margin-top:-150px; background:#fff; font-size:1em; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 8px gray; -webkit-box-shadow:0 0 8px gray; filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229',Direction=135,Strength=3); box-shadow:0 0 8px gray; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}


#bubblemenu li:hover >div{visibility:visible; opacity:1; margin-top:-150px; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}

3. Simpan template
Tahap selanjutnya adalah pemanggilan kode diatas, Sekarang masuk ke Elemen Halaman.

-->Tambah Gadget --> HTML/JavaScript
-->Simpan kode berikut didalam content Javascript

<ul id="bubblemenu">
<li><a href="URL/LINK" target="_blank">Contoh Tooltip</a><div>Keterangan Dalam Balloon Tooltip</li>
<li><a href="URL/LINK" target="_blank">Contoh Tooltip</a><div>Keterangan Dalam Balloon Tooltip<</li>
<li><a href="URL/LINK" target="_blank">Contoh Tooltip</a><div>Keterangan Dalam Balloon Tooltip</li>
<li><a href="URL/LINK" target="_blank">Contoh Tooltip</a><div>Keterangan Dalam Balloon Tooltip</li>
</ul>

Keterangan : Kode URL/LINK adalah Link anda Kode keterangan dalam balloon adalah keterangan dalam balloon tooltip