Tips membuat Tooltip dengan Jquery

Tooltip dengan jquery
Maksud dari tooltip itu ialah sejenis title pada link yang kita sorot baik berupa banner atau link biasa. contoh di blog ini bisa anda sorot tombol Home yang ada diatas.

Ide ini saya ambil dari blog bookmarknya Choen..

Begini caranya Trik Membuat ToolTip di Blogger:

1. ToolTip ini menggunakan Jquery, untuk itu anda perlu memasang script berikut (jika memang belum anda miliki), diatas </head> :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
2. Masukan javascript berikut, di dibawah script jquery diatas.

<!-- begin Tooltips -->
<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});

</script>
<script type="text/javascript">
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>

"+content+"</div>
");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>

</script>

3. Selanjutnya masukkan code css, code css ini dapat anda modifikasi, seperti warna, atau juga anda dapat menggunakan background image(seperti aslinya dari script ini).


#easyTooltip{
padding:5px 10px;
border:1px solid #EF6D21;
background: #181C18;
color:#E0EFE0;
}

4. Ini tahap terakhir untuk mengaktifkan fungsi Tooltips, yaitu masukan code berikut, disetiap link yang anda inginkan.

class='tooltip' title='isi sesuai yang anda inginkan'

contohnya penerapannya seperti berikut:

<a class="tooltip" href="http://draft.blogger.com/" title="Beranda">
Beranda
</a>
>> demikian keseluruhan tahapan tersebut, semoga berhasil.

UPDATE : Dikarenakan blognya Choen tidak lagi memasang tooltips, maka contoh penerapannya bisa kamu lihat pada blog Oblo.web.id kemudian kamu bisa sorot link-link yang ada pada blog tersebut.

27 komentar untuk “Tips membuat Tooltip dengan Jquery”

  1. ga ngerti juga dach...... maaf :(

    BalasHapus
  2. Maaf mau tanya nich...fungsinya buat apa Om?.....Maklum ane baru belajar dan gaptek....

    BalasHapus
  3. Makasih untuk tipsnya kawand...
    Aku simpan dulu...

    BalasHapus
  4. @Seh solehudin, contoh penerapannya bisa anda lihat pada blognya oblo. Linknya udah saya pasang diatas...

    BalasHapus
  5. nice posting.....
    simpan dulu .... untuk referensi...!!
    makasih...!

    BalasHapus
  6. Ini bikin berat loading ga? Solanya kan gosip-gosipnya Google memasukkan kecepatan loading sebagai salah satu unsur SEO.

    BalasHapus
  7. sip...
    salam kenal gan...
    banner anda sudah saya pasang di blog saya...monggo di cek..

    http://bradda-daus.blogspot.com/2010/04/tuker-link-yuuu.html/

    d tunggu banner balik nya mas... ;;)

    BalasHapus
  8. @Reza Winandar : Sama sekali tidak bro, jquerynya ringan kok...

    BalasHapus
  9. Blom tau mo pake antau ngak, cuman di save Dulu Gan, siapa tau ternyata ada ide untuk pake, jadinya gak perlu muter muter lagi

    BalasHapus
  10. ok keren sobat...
    dapat membntu pengunjung tentang keterangan pada LINK yg kita pasang..
    benar begitu sobat...
    terimaksih banayak

    BalasHapus
  11. Thank you for these information.There were very useful for me. Looking forward to read the next post :)

    BalasHapus
  12. Boleh di coba ni Bozz.....!! tkran link y.
    link si boz dah di pasang di www.chugygogog.blogspot.com thanks silahkan di lihat.

    BalasHapus
  13. mampir lagi ni sobat...wah udah ada trik baru rupanya...tapi mumet ni he he he...coba ah...ada trobosan baru kayak kang rohman ni he he

    BalasHapus
  14. tak tanya suami dl,pa maksudnya ya!ga ngerti aku...

    BalasHapus
  15. saya punya gagal mas,.
    ne blog saya http://dkills.blogspot.com
    mohon bantuannya mas,..

    BalasHapus
  16. waduh saya juga ng ngerti nie.
    saya pake thesis template, bisa ng ya di aplikasikan di blog saya?
    bagi yang mau pake Thesis Blogger Template bisa langsung mengunjungi blog saya. Ringan banget templatenya.

    BalasHapus
  17. @Dimas Gandhi, setelah saya lihat blog anda kebanyakan memakai file javascript. saran saya file js yang tidak terlalu perlu sebaiknya tidak digunakan. thanks...

    BalasHapus
  18. korakokok peryagaba ni nga website kay dli ko kabalo, ambot ngano ning mga yawaa ni mu daog unta si mayor oloy. ahak gi buwisit ko aning coming nga bognong lugaynon.ambot gayon tedoro and akjh mo daog ani, salamat kaayo s ainyong suport

    From Rean
    Philippines

    BalasHapus
  19. di pasang nanti aja deh..... makasih infonya mas....

    BalasHapus
  20. Good stuff - thanks for sharing!

    BalasHapus
  21. 4. Ini tahap terakhir untuk mengaktifkan fungsi Tooltips, yaitu masukan code berikut, disetiap link yang anda inginkan.

    dimasukinnya dari mana om?

    BalasHapus
  22. terimakasih banyak atas infonya gAn..

    BalasHapus