Membuat Tooltip Preview Image Dengan jQuery

Berbicara mengenai tooltip mungkin sudah banyak sahabat Blogger yang membahas mengenai Tooltip. Sedikit penjelasan dari saya mengenai Tooltip, Tooltip adalah Komponen grafis dalam user interface pengguna, komponen pada tooltip seperti deskripsi atau gambar akan muncul ketika cursor menyentuh gambar (thumbnail) atau text pada Tooltip.

Tooltip dapat dibuat menggunakan javascript, CSS atau  pseudo elements. Pada kesempatan kali ini saya akan menjelaskan bagaimana membuat Tooltip dengan menggunakan Javascript, Tooltip berikut ini adalah tooltip Image dimaksudkan apabila anda menyentuh gambar (thumbnail) maka akan muncul gambar dengan tooltip. Bagi anda yang tertarik Membuat Tooltip Preview Image Dengan jQuery berikut langkah-langhaknya :

Demo

Contoh Tooltip Preview Image dengan Text :

aak-share.blogspot.com


Contoh Tooltip Preview Image :

Membuat Tooltip Preview Image Dengan jQuery 

1. Login keakun Blogger
2. Pilih Template ➨ Klik HTML
3. Kemudian anda cari kode ]]></b:skin>
4. Copy kode dibawah ini dan letakkan diatasnya

/*Tooltip preview*/
#preview{ position:absolute; border:5px solid #A9A9A9;-webkit-box-shadow: 2px 2px 10px 8px ; box-shadow: 2px 2px 10px 8px ; border-radius:10px; background:#64950;border-radius:10px; padding :15px; display:none; color:#fff;}

5. Selanjutnya anda cari kode </head>
6. Copy code dibawah ini dan terapkan diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js' type='text/javascript'/>
<script src='https://aakyos.googlecode.com/svn/trunk/image_priview.js' type='text/javascript'>
//<![CDATA[
// Tooltip Preview Image
$('.post-body, .post-body p, div.post-body, #img-body, #main_img').each(function () {
    $('Image[class="Preview"]').replaceWith(function () {
        return $('<img><code>' + $(this).html() + '</code></img>');
    });
});
//]]>
</script>

Note :
Jika di Template anda suda ada code yang saya beri warna biru maka anda lewati code tersebut

7. Simpan Template

Menampilkan Tooltip Preview Image
Untuk menampilkan gambar diperlukan kode pemanggil, terapkan kode dibawah dipostingan pada mode HTML

<a class="preview" href="Url gambar yang akan dijadikan priview" ><img src="Url gambar yang muncul di postingan"></a>

Jika anda ingin menampilkan Text atau tulisan dengan preview gambar anda gunakan kode dibawah ini

<a class="preview" href=" Url gambar yang akan dijadikan priview" >Tulisan yang muncul dipostingan</a>

Keterangan :
Kode yang saya beri warna biru ganti dengan URL gambar atau Text Anda,

Demikian Membuat Tooltip Preview Image Dengan jQuery, semoga bermanfaat!

Bagikan Artikel ini