Easy jQuery Tooltip Plugin

Mengenai postingan sebelumnya Make The Links be Funky ternyata sinergi dengan trik Tooltip. Artikel ini disadur dari web gaya punya, dimana artikelnya memang membuat kita betah dalam membaca dan praktek 1stwebdesigner. Disana sobat akan menemukan artikel 30 jQuery Tooltip Plug-in :-bd Hebat dah webnya, mengumpulkan postingan mengenai suatu tutorial langsung berebet buanyak :x

Seperti yg dijanjikan tadi Beben si bloglang ganteng kalem mau berbagi trik tooltips yg simpel tapi memang stylish punya b-)

1. Demo tooltip pada link.
Disini penggunaan link menggunakan attribute class="tooltip" yg menimbulkan efek pada anchor titel akan bertambah gaya.
2. Demo tooltip pada link dengan gambar.
Jika kita menyorot satu link akan ada gambar beserta captionnya. Link menggunakan attribute class="preview"
3. Demo tooltip link tulisan dan gambar.
Link tulisan jika disorot akan ada thumbnail gambar dan bisa caption juga. Disini link memakai attribute class="screenshot"
4. Original post by Css Globe.

Kalau itu dipisah trik tooltipnya, sesuai selera mau mana yg bermanfaat. Bagaimana kalau itu semua jadi satu :-/ Yuk mari dilanjut jalan-jalan ;)) Trik ini dari web Blufusion.net. Disana sobat akan mendapatkan trik tooltip pada titel secara sederhana ;) Dari demonya Demos-Blufusion.net, ini yg akan Beben kupas! cek get dot...

1. Pertama-tama harus memiliki script jQuery minimal versi berikut.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

2. Letakan kode CSS berikut diatas/sebelum kode ]]></b:skin>
span { display:none; position:absolute; z-index:1000; -moz-border-radius:4px; -webkit-border-radius:4px; } .tooltip1 { background:#5a85a5 url(http://GAMBAR-RESOLUSI 48px x 48px.PNG) 10px center no-repeat; color:#fff; min-height:30px; padding:15px 15px 10px 55px; opacity:0.9; } .tooltip2 { background:#363636; padding:3px; color:#fff; text-align:center; } .tooltip3 { background:#777; color:#fff; padding:5px; border:1px solid #f00; }
3. Masukan script pemanggilnya diatas/sebelum tag </body>
Bisa juga diletakan bersamaan pada langkah kesatu scriptnya.
<script type="text/javascript"> $(document).ready(function() { $(".tooltips").hover( function() { $(this).contents("span: last-child").css({display: "block" }); }, function() { $(this).contents("span: last-child").css({display: "none" }); } ); $(".tooltips").mousemove(function(e) { var mousex = e.pageX + 10; var mousey = e.pageY + 5; $(this).contents("span: last-child").css({top: mousey, left: mousex }); }); }); </script>
4. Save.

Berikut penulisan ketika sobat mau memosting sebuah link.

1. Contoh pertama.
<div class="tooltips"> jQuery Tooltip Demo<span class="tooltip1">Lorem ipsum dolor sit amet.</span> </div>
2. Contoh kedua.
<div class="tooltips"> Sample Content<span class="tooltip2"><img src="http://LINK-GAMBAR.PNG"/><p>Epsum factorial</p></span> </div>
3. Contoh ketiga.
<div class="tooltips"> Sample Navigation<span class="tooltip3">This is a normal tooltip</span> </div>

Intinya dalam penulisan sebuah link nanti pada postingan harus di tag <div class="tooltips">...</div> dan titik-titik tersebut diisikan dgn penulisan link beserta attribute class="tooltip1/tooltip2/tooltip3" Gambar diatas merupakan demo yg sudah Beben praktekan dan its work. See you bay bay :-h Happy blogging \m/ salam blogger!!!