Tooltip Dengan Efek Bouncy
Pada prinsipnya tooltip ini diciptakan dengan metode $.tools.tooltip.addEffect, dimana argumen pertama adalah nama efek yang akan digunakan.
Argumen kedua adalah fungsi yang mendefinisikan bagaimana tooltip akan ditampilkan dan argumen ketiga mendefinisikan bagaimana tooltip akan berakhir.
D E M O
Silahkan letakan cursor pada text, link atau gambar untuk melihat contoh Bouncy Tooltips...
More Detail :
Cara Memasang Bouncy Tooltips
Langkah Pertama :
Tambahkan kode berikut ini ke dalam tag <head> templat anda.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://sites.google.com/site/archivesiugi/javascr/BouncyTooltip.js">
/***********************************************
* Tooltip Dengan Efek Bouncy (c) Buku Catatan si Ugi (http://caprt3a.blogspot.com)
* This notice MUST stay intact for legal use
* Visit http://caprt3a.blogspot.com/ for this script and more.
***********************************************/
</script>
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/archivesiugi/javascr/BouncyTooltip.css" />
<script src="https://sites.google.com/site/archivesiugi/javascr/BouncyTooltip.js">
/***********************************************
* Tooltip Dengan Efek Bouncy (c) Buku Catatan si Ugi (http://caprt3a.blogspot.com)
* This notice MUST stay intact for legal use
* Visit http://caprt3a.blogspot.com/ for this script and more.
***********************************************/
</script>
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/archivesiugi/javascr/BouncyTooltip.css" />
Langkah Kedua :
Berikut adalah konfigurasi tooltip untuk menentukan bagaimana tooltip dapat ditampilkan dan anda dapat meletakannya diatas kode </body>.
<script type="text/javascript">
$("#jqtips a[title]").tooltip({effect: 'bouncy'});
$("#jqtips img[title]").tooltip({effect: 'bouncy'});
</script>
$("#jqtips a[title]").tooltip({effect: 'bouncy'});
$("#jqtips img[title]").tooltip({effect: 'bouncy'});
</script>
Langkah Terakhir :
Dibawah ini adalah contoh markup yang dapat anda gunakan untuk menampilkan Bouncy Tooltip pada halaman website anda dan anda dapat memasangnya dalam tag <body> atau dimanapun anda ingin menampilkan Bouncy Tooltip ini pada halaman website anda dengan menambahkan sintak seperti contoh dibawah ini pada setiap link.
<div id="jqtips">
<a href="Link atau URL anda" title="Ini Adalah Isi Tooltip Dengan Efek Bouncy">Text untuk Link yang akan ditampilkan</a>
</div>
<a href="Link atau URL anda" title="Ini Adalah Isi Tooltip Dengan Efek Bouncy">Text untuk Link yang akan ditampilkan</a>
</div>
mas saya kesulitan naroh deskripsi tooltipnya.taroh dimana ya....di edit html atau widget?bantu ya...
ReplyDeleteAbang @bedi javas Tooltip ini sebenarnya dapat ditempatkan dimana saja pada blog atau halaman website anda. Begitu pula dengan deskripsi Tooltip, abang bisa menyisipkannya pada setiap link dalam template atau dengan menambahkan widget dan meletakan syntax kedalamnya.
Deletecontoh:
<div id="jqtips">
<a href="http://caprt3a.blogspot.com" title="Klik disini! lihat full artikel di Buku Catatan si Ugi.">Kembali Ke Beranda</a>
</div>
Ok Abang selamat mencoba dan terimakasih sudah berinteraksi dengan Admin.
aduh mksh bgt ats tanggapnnya.nti sy coba lgi.dgn style bru edit agk bingung.klw gagal sy contac lg mas ugi.s-x mksh banget.....
ReplyDeletemksh bgt mas ugi.sy dah nyba ada ke gagaln,okay sy coba lg.dgn style edit html yg bru agk bingung.s-x lg mksh,mklum sy bljr otodidak.Style your blog amazing....
ReplyDeletemas ugi.sy mau nyoba bullet depan link arsip blog. Ada brpa gambar bullet?tiga ya?sy dah upload ke photobucket.gmn cara pemasangannya?
ReplyDeleteAbang @bedi javas, saya hanya menggunakan sebuah gambar untuk membuat blog archive tersebut, selebihnya menggunakan CSS. Untuk custom Blog Archive, abang bisa lihat tutorialnya disini terimakasih
Delete[blockquote style='padding:5px;border:1px solid #f00';]<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/archivesiugi/javascr/BouncyTooltip.css" />[/blockquote]
ReplyDeleteyang ini stylesheetnya ya sob,, kalo boleh nanti saya edit ya
Mangga, silahkan wae kang,,, :)
Delete