Trik Membuat Tooltips HTML!!

tooltipsTooltips?? apaan sich itu? silahkan sobat arahkan kursor sobat pada tulisan TOOLTIPS. Nah sekarang udah tau dunk apa itu tooltips? mau tau cara buat tooltips HTML?? silahkan disimak yach hehehe *_*


Sebelum memulai jangan lupa menyimpan templatenya secara penuh y! dengan cara

Layout---> Edit HTML---> Download Full Template

nah sekarang Letakkan kode CSS dibawah ini tepat diatas </head>

<style type="text/css">

div.htmltooltip{
position: absolute; /*leave this and next 3 values alone*/
z-index: 1000;
left: -1000px;
top: -1000px;
background: #272727;
border: 10px solid black;
color: white;
padding: 3px;
width: 250px; /*width of tooltip*/
}

</style>


NB: kode css bisa sobat modifikasi sesuai keinginan ^_^

Kemudian letakkan javascript juga diatas kode </head>

<script type="text/javascript" src="http://ad4msan.freevar.com/ad4msantooltips.js"/>
<script src='http://ad4msan.freevar.com/ad4msanquery2.js' type='text/javascript'/>


Jangan lupa di save templatenya

Setelah itu letakkan kode berikut pada postingan sobat

<a href="#" rel="htmltooltip">Teks tooltips</a>

<div class="htmltooltip">Keterangan tambahan tooltips.</div>


NB: teks yang berwarna kuning merupakan link dari tooltips yang dibuat (jika ingin memasukkan link tambahan), teks berwarna hijau merupakan tooltips yang akan kita buat dan teks berwarna ungu merupakan keterangan yang akan ditambahkan jika tooltips yang dibuat di sorot kursor mouse, dan peletakkan <div class="htmltooltip">Keterangan tambahan tooltips.</div> sebaiknya di bagian akhir dari postingan sobat agar tidak merubah susunan paragraf!

Tooltips adalah keterangan tambahan yang keluar ketika sebuah teks atau gambar disorot oleh kursor mouse




Bagi yang ingin copy paste jangan lupa di sertai back link ke situs ini dan sumber.

Author : velshadow

On : 17 Juni 2009


silahkan berkomentar dengan sopan.