You must enable Javascript in your browser to run or open this site.

Special Jquery Tooltips!

Halo sobat lagi lagi ketemu kalian lagi di sini. Kedatangan saya kali ini bertujuan untuk membawakan oleh oleh Tutorial lagi nih buat sobat semua. Sebelumnya saya pernah mempostingkan bagaimana cara membuat Tooltips dengan Jquery. Apa sih Tooltips itu? Selengkapnya bisa sobat lihat di postingan lamaku itu. Nah tutorial kali ini sangat berkaitan dengan postingan lama tersebut. Namun ada perbedaan dari Tooltips lama dengan Tooltips Special yang kali ini saya akan publikasikan :
  1. Efek Hover pada Tooltips
  2. Muncul untuk semua link yang diberi Tag [title]
Saya akan membahas maksud dari "Muncul untuk semua link yang diberi Tag [title]" tadi. Itulah keistimewaan dari Tooltips Special kali ini. Pada Tooltips yang lama itu jika ingin menampilkan Tooltips wajib meletakan kode class, jadi tidak semua link akan terkena efek Tooltips ini. Tetapi kali ini sebaliknya, alias semua Link terkena efek Tooltips ini.

DEMO PAGES [click here!]

 Sudah liat kehebatan dari Special Jquery Tooltips itu? Yuk dilihat bagaimana cara membuat.
  1. Buka Blogger.com
  2. Saat Disahsboard Klik Layout → Edit HTML
  3. Copy code berikut tepat bawah kode <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="http://css-tricks.com/examples/CSS3Tooltips/js/tooltips.js"></script>
    <script> $(function() { $("body a, span, p, div[title]").tooltips(); }); </script>
  5. Kemudian letakan kode berikut diatas kode ]]></b:skin>
  6. .tooltip {   pointer-events: none;   opacity: 0;   display: inline-block;   position: absolute;   padding: 6px 12px;   color: white;   border-radius: 7px;   margin-top: 20px;   text-align: center;   font-size:14px;   font-family:Comic Sans ms;   box-shadow: 0 0 3px black; } .tooltip, .arrow:after {   background: black;   border: 2px solid white; } .arrow {   width: 70px;   height: 16px;   overflow: hidden;   position: absolute;   left: 50%;   margin-left: -35px;   bottom: -16px; } .arrow:after {   content: "";   position: absolute;   left: 20px;   top: -20px;   width: 25px;   height: 25px;   -webkit-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;   -moz-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;   box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;   -webkit-transform: rotate(45deg);   -moz-transform: rotate(45deg);   -ms-transform: rotate(45deg);   -o-transform: rotate(45deg); } .tooltip.active {   opacity: 1;   margin-top: 5px;   -webkit-transition: all 0.2s ease;   -moz-transition: all 0.2s ease;   -ms-transition: all 0.2s ease;   -o-transition: all 0.2s ease; } .tooltip.out {   opacity: 0;   margin-left: 100px; }
  7. Kemudian Save Template!
  8. Tooltips akan muncul ketika sobat meletakan kode title="deskripsi". Contoh
  9. <a href="URL" title="deskripsi">TEXT</a>
    <div title="deskripsi">TEXT</div>
    <span title="deskripsi">TEXT</span>
    dan lain lain
Sudah selesai tips dan trik membuat Tooltips Special ini :)

147 comments

  1. Akhir Dapat Pertamax ga ya?
    Tutorial mantebs Master.Izin Oprek-oprek dulu ya.

    BalasHapus
  2. Kembali lagi, akhir maksudnya akhir Pekan.Master kapan ngadain Kontes Lagi ^_^

    BalasHapus
  3. wah.......mntab neh........
    izin nyoba gan

    BalasHapus
  4. wahhh.....Lumayan Keduaxxx....
    manstabb....tetor yang scrollbar webkitnye dah suksess ane coba di blog ane, thanks...
    skrg tinggal yang ini di coba dulu lagi nih...
    ke Tkp dulu ahh....
    Nice 4 share....

    BalasHapus
  5. kaya punya ente yang kemaren ya sob,...??

    BalasHapus
  6. To Bisnis Online Blog : selamat ya sob pertamaxnya :)) =)) silahkan di oprek oprek :))
    To IT-Soft Center : hehehe silahkan di cobain sob jika mau :)
    To Zaenal Blog : oke gan hehehehe selamat mencicipi tutorial yang ini ya gan :)

    BalasHapus
  7. To BLOGCUNAYZ : bukan gan beda lagi. yang dulu kan postingan lama itu.
    To Bisnis Online Blog : ojo panggil master lah kita kan sama sama belajar :) ada deh sob kapan kapan nanti ulang tahun ane :)

    BalasHapus
  8. wah bolh juga nih buat di coba2 thanks sob

    BalasHapus
  9. wawwwww, , sumpah! keren mas!!

    BalasHapus
  10. To Zh!nTho : hehehe iya sob boleh banget :) silahkan dicoba :)

    BalasHapus
  11. ajib2,, keren tooltips nya =)) izin kenyott kk faris,, emah, emah,, :-* :-* wakwakwak =))

    BalasHapus
  12. ruaarrbiasa..demo-nya saja keren abis sobat :-)

    BalasHapus
  13. lagi2 sangat cool sob cssnya...
    Mantaf faris.. Pokokde tak jajal terus dah hehee..

    Thanks sob..

    BalasHapus
  14. To Rama88 : silahkan disedot gan kodenya huahaha :)) =)) oke dewh dek rama.
    To Yudi Glanter : oke mas dilanjutkan kapan kapan aje :)) =))

    BalasHapus
  15. To BlogS of Hariyanto : hehehe kalau berkenan di cobain aja sob di blog :) hihihi

    BalasHapus
  16. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  17. mantep bener sob tipsnya.nanti tak cobain ya..

    BalasHapus
  18. keren sakali ni trik ane jadi kagum sangat

    BalasHapus
  19. To V-MediaKom : makasih banget ya gan support komentarnya :) silahkan di jajal :))

    BalasHapus
  20. To Ageboy : hehehe makasih banyak ya sob komentarnya dan juga supportnya :)
    To Admin-Wahid Sahidu : hehehe ane juga kepingin pakai ini gan :)

    BalasHapus
  21. Wahh,, Nice Share n Nice Tipss

    Praktek langsung

    BalasHapus
  22. To Mharjipes : makasih ya gan :) silahkan di praktekan :)

    BalasHapus
  23. =)) ane terakhir lagi :D Hemmm... :D
    Jquery ya Sob.. :D manteb nih Mainnya Script2 ginian terus :D
    Sukses deh blognya :D
    N tutornya menarik mulu :D
    Nice :D

    BalasHapus
  24. wew...mantap mas..
    itu asli css semua ya mas..
    tampa pake gambar satu pun...
    mmm...pasti rumit bgt bini nya...
    Di coba ah..heheheh.:D

    BalasHapus
  25. wah, ketinggalan.. tak coba ah..

    BalasHapus
  26. bolak balik dari rumah dateng kesini izin belajar lagi om.hehee
    soalnya klo copaz trus nggak ngerti2 nanti fungsi codingnya.=))

    BalasHapus
  27. To Aku mau Gratisan : hahahha banyak banget gan emoticonnya huahahhaa :D iya deh sob kapan kapan ane gak mainan script dlu :) refreshing :))
    To Andre Pandet Rank Khoerai : ente kirain gambar ya sob :D efek after dan before sob biasa :D silahkan di coba :)
    To Domain gratis [dot] IN : thanks bro hehehe makasih ya kunjungannya :)

    BalasHapus
  28. Mantapp,, bro ngejreng efek jquerynya. blog aku belum jadi mass.. jadi gak ada identitas. ntar ya kalau udah ada bloknya ;;) :>

    BalasHapus
  29. To awelqq : silahkan di coba sob :)
    To Ageboy : hehehe iya sob itulah kelemahan dari kopas kopasan sob :) heheheh :))

    BalasHapus
  30. To Anonim : oalah gitu ya sob, ane tunggu deh blog ente yang bagus itu :)

    BalasHapus
  31. oh gitu toh,nice2 lanjutkan sob :))

    BalasHapus
  32. To BLOGCUNAYZ : hehehe iya sob kalau yang ini beda lagi sob :D special nih buat ente :)) =))

    BalasHapus
  33. dapat yang baru lagi tiap main ke blog ini...nice post sob ;D

    BalasHapus
  34. hahaha..bener sob,.
    dan sangat kebetulan sekali tugas kul saya disuruh nghafalin coding..tambah mantap mumetnya.hahaa

    BalasHapus
  35. wah ane jadi tambah ilmu lg nih, lumayan ribet juga ya baca kodenya (˘Ú¡˘)

    BalasHapus
  36. To Ageboy : waawww kuliah jurusan apa sob sampe hafalin kodingan :D IT ya? :D mantap!
    To Herry : hehehe alhamdulillah ya gan sesuatu banget :) hehehe iya gan :))

    BalasHapus
  37. To awelqq : waw berhasil ya gan :d selamat deh sob :)) huahahhaa

    BalasHapus
  38. bruakkakaka,, dek rama,, =)) =)) ngakak we ahh,, =))

    BalasHapus
  39. dulu pernah posting kayak gini kan gan? ternyatas simpel ya kodenya. ok kapan2 saya coba di blog ane. nice info

    BalasHapus
  40. To Rama88 : makanya jgn sok sokan manggil gua kakak huahaha tau rasa kau :)) =))
    To sejuta trik blogger : iya gan dulu pernah gan :) tetapi beda jauh gan sama sekarang :)

    BalasHapus
  41. Tooltips sama title fungsinya sama aja kan sob?
    oya ada artikel tentang Navigasi Breadcrumb dan menambahkan title pada semua judula artikel?
    kl belum ada ane request ya sob. ;)

    BalasHapus
  42. To Liandri Eko : tooltips untuk lebih erlihat hidup dan keren sob. Ane sudah posting sob tentang menambah title pada semua judul DISINI

    BalasHapus
  43. Seperti biasanya..tooltips nya keren sob...
    Jempol buat sobat faris dech

    BalasHapus
  44. Dengan Tooltips Special ini pembaca serasa disapa,ini bagus sob untuk lebih mengakrabkan kita.Ane praktek dulu kawan,makasih ya,happy blogging aja.

    BalasHapus
  45. To awelqq : heheheh disini gak ada emo jempol sob disini :D huhahaha
    To cardiacku : hehehe makasih ya gan supportnya :) thanks kunjungannya :)

    BalasHapus
  46. Kunjungan malam sahabat..sepertinya blognya makin rame sahabat dan juga tipsnya bagus-bagus sahabat

    BalasHapus
  47. Blogwalking sama follow gan... Follback ya gan...

    BalasHapus
  48. btw ane pengen banget pasang Tooltips kaya gitu , tapi jadi tambah berati blog ane :(

    BalasHapus
  49. hahahahaaha ente ditipu sma bang Andre Ris =)) udah jago dia begituan :D

    BalasHapus
  50. sambut pagi hari yang indah dirumah sahabat

    BalasHapus
  51. Keren nih tutornya sob,, ijin coba dulu,,

    BalasHapus
  52. Thank's sob ,,btw saya temukan tutorial ini dari artistutorial.blogspot.com lengkap disana

    BalasHapus
  53. gan fariz, maaf baru sempet bales kunjungan karena terkendala aktifitas outdoor..
    aye, gan. udah ada beberapa artikel baru di rumah saya, hehehe..
    monggo, silahkan kalo berkenan boleh berkomen disana..
    thanks ya gan.
    walopun saya ga mudeng sama penjelasan agan faris di atas, tapi silaturahminya tetep jalan gan..
    ok..
    hv a great day gan..
    salam sinergi.. heheheh :)

    BalasHapus
  54. mejeng2 lagi ahh dimari,, wakwakwak =))

    BalasHapus
  55. hahay special ya sob :Love lah wkwkwk

    BalasHapus
  56. jquery bikin motion makin mesra,
    =))
    makasih sharenya :D

    BalasHapus
  57. To Ibnu Siswuyo : alhamdulillah sobat datang nih :D sekian lamanya vakum ya? :))
    To Mukhammad : thanks ya kunjungan dah follow nya :) segera di follback :)
    To Mbah Qopet : hehehehe ane gak tau deh sobb soal berat atau gaknya :)

    BalasHapus
  58. To Mbah Qopet : hehehe ae juga udah tau kalau dia itu jago sob :)) cuman iseng aja :)
    To Admin-Wahid Sahidu : selamat datang di wilayah terlarangku pagi tadi :)
    To AYROY ZONE : hehehehe oke sob silahkan di coba :)

    BalasHapus
  59. To Dangstars : ohhh gitu ya sob :) selamat deh sob penemuannya :))
    To Outbound Malang : hehehe oke gan gak apa apa kerjain dulu dunia offlinenya baru dumay :) masa sih gak mudeng. jgn di gak mudeng gak mudengin. ntar beneran gak ngerti selamanya lho :D
    To Rama88 : silahkan di pejeng pejengin dulu sob :))

    BalasHapus
  60. To BLOGCUNAYZ : iya sob special banget untuk sobat :Love
    To Paypal VS Ayu Ting Ting : hehehe iya sob =)) makasih ya komentarnya

    BalasHapus
  61. saing hari disini lagi semoga mas farixsan senang

    BalasHapus
  62. To Wahid Sahidu : hehehehe makasih sudah datang, alhamdulillah ane senang :)

    BalasHapus
  63. Saya masih belajar yang namanya jquery

    BalasHapus
  64. Coba dulu ya gan, kayaknya menarik ni..
    Komentar saya ini KEBERAPAXXX ya?
    Hehehe..

    BalasHapus
  65. xixixi...
    ahhahaha, emang dasar ga mudeng aja kali saya nya..
    panggil ane nolimit ajah gan..
    nama dumay itu..
    hhohoho..
    #ngekngok :D

    BalasHapus
  66. Ini kesannya auto ya Sob..Setiap link ber-tag akan keluar tooltip-nya. Beda dengan yang pake css biasa seperti yang pernah gue praktekkin..ini lebih kompleks...Nice share Sob

    BalasHapus
  67. To Aryo Seno : saya juga masih belajar kok sob
    To Kopiah Putih : silakhan di cobain sob. gak tau dah sob :))
    To Outbound Malang : gitu kah? :) oke deh nolimit oke dah :)) =))

    BalasHapus
  68. To Aku mau Gratisan : hehhee iya gan :) namanya juga DEMO hahaha :))
    To Iskaruji dot com : iya sob namanya juga special hehehe. ada yang css nya ya :) mantap deh
    To Berbagi Ilmu Pengetahuan : makasih ya sob supportnya :) ane udah dapat PR sob :))

    BalasHapus
  69. gak ada emo jempol gpp, hayalin aja jadi jempol (y) :-*

    BalasHapus
  70. To Raihan Mar'ie Ramadhan : hehehe benar sekali itu sob, terasa lebih hidup :) silahkan :)
    To Bayu Rifai : hehehe sebenernya sudah lama sob tetapi baru ini saja updatenya :)
    To Bayu Aldi Yansyah : wwwwww. menurut ane juga seperti itu :) makasih ya komentarnya
    KOMENTAR KALIAN BERTIGA MASUK DAFTAR SPAM!! ane publish lagi aja

    BalasHapus
  71. To awelqq : ntar ane tambahin kok emoticon jempol di blog :)

    BalasHapus
  72. jquery ya hmm.. saya jarang sih pake-2 ginian. btw sip lah tutorial nya :)

    BalasHapus
  73. makin lama makin keren nih tipsnya.. hihi
    mantap sob :D

    BalasHapus
  74. To Dhani : iya sob Jquery :) hehehe di cobain aja sob :)
    To Seandainya saya menjadi Anggota DPD RI : makasih ya sob supportnya hehehe makasih juga kunjungannya :D

    BalasHapus
  75. malu ane nyebutin jurusannya sob,,coding aja belum hafal.hahaaa
    nnti klo udah hafal codingnya tak kasih tau dah.wkkw:)

    BalasHapus
  76. To Ageboy : jgn jaim dulu om :) buka bukaan saja kan gak apa apa ;;)

    BalasHapus
  77. baca baca postingan sobat lagi ah :D

    BalasHapus
  78. To Candra : makasih ya kehadirannya :)
    To Deganshah Putra : silahkan di baca baca sob :) makasih ya kunjungannya

    BalasHapus
  79. dateng lagi ni sob, semoga kau bahagia

    BalasHapus
  80. kunjungan perdana gan....
    ditunggu kunjungan baliknya...

    BalasHapus
  81. To Yudi Jounk : selamat datang kembali son hehehe :)
    To IsalBlog.com : makasih sob kunjnugan perdananya :)

    BalasHapus
  82. ikut nyimak aja dah..... gak ngerti ai....

    BalasHapus
  83. To obinhut : khusus pengguna PC sepertinya yang bisa melihat sob :) hehehe

    BalasHapus
  84. selalu tutorial yang bermanfaat bagi saya.. nice share sob :)

    BalasHapus
  85. selalu saja postingannya baru saya tahu..nice info + pengetahuan nih gan...
    dari pd nggak pernah pertamaxx saya yang Terakhirxxx ajah lah..hehehe..

    BalasHapus
  86. komen ane gga d jawab :( :D :D :D
    permisi mas faris nyari keong :D

    BalasHapus
  87. yeeeeeey, :D udah ada (y) ... wkwkwkwk =))

    BalasHapus
  88. hadir malam mas farixsan heheheh da betul to namanya

    BalasHapus
  89. mikum2 ada orang gak ya??

    dah tidur kali ya :))

    yaudah good night masbro =)) =))

    BalasHapus
  90. buka-bukaan malu diliat orang ntar omm.wkwkkw

    BalasHapus
  91. setiap hadir disini selalu tempalte backgroundnya berubah terus ya,,,dan selalu keren,,,

    BalasHapus
  92. cantik nian mau belajar dikit-dikit juga mas, saya

    BalasHapus
  93. Kembali lagu dulu ah bang faris, mau nganter undangan nih buat zakat.

    BalasHapus
  94. mantab sob animasinya,,,
    gk berat juga,,,,
    makasih eaaa

    BalasHapus
  95. mantap sob, tampilannya juga begitu segar... happy blogging.

    BalasHapus
  96. wah. ini yang saya cari sobat, ini bisa saya gunakan pada link download saya untuk memberikan informasi berapa jumalah file size yg akan di-download, saya pelajari dulu yach sobat...

    BalasHapus
  97. ahhaha, sipp de gan..
    monggo kalo mau kesini yuk dimari..
    xixixi :)
    ane diskon dah..
    ahhahaha X)

    BalasHapus
  98. To Jobkolom : kebetulan aja sob ini :) makasih banyak ya sob komentarnya :)
    To BELAJAR SEGALA TRIK : thanks ya supportnya :) alhamdulillah kalau bermanfaat :)
    To Arif-Bloggers : heheheh alhamdulillah kalau nambah ilmu :) gak ada yang terakhir sob :)
    To Bayu Aldi Yansyah : cek dulu sebelum komen 8-} jgn asal komen tanpa bukti sob :)) =)) udah ane bales juga

    BalasHapus
  99. To awelqq : huahahaha iya sob lagi mau nambah yang lainnya :)) :bad dan (y)
    To BLOGCUNAYZ : wahhh walikum sob :)) ane ngantuk!
    To Ageboy : huahahaha iya juga sih sob. :)) kecuali orang yang urat malunya terpotong :)) =))

    BalasHapus
  100. To al kahfi : hhehehe makasih banyak ya sob pujiannya :) makasih supportnya
    To smp3lembang : pelajari saja sob lebih lanjut :)
    To Bisnis Online Blog : "lagu" ada juga "lagi" huahahaha =)) oke deh :)

    BalasHapus
  101. To >>> Ichwan HAUSGAME : makasih ya kehadirannya :)
    To Windows 7 Blog : iya sob gak terlalu berat :)
    To Said Arsyad : segar bagaikan melihat apa itu sob =))

    BalasHapus
  102. To Asis Sugianto : wahhh bagus banget tuh sob kalau di kombinasi dengan link download. pasti keren :) selamat mencoba
    To Outbound Malang : diskon berapa persen om? 100% okelah huahahaha =)) canda

    BalasHapus
  103. Ini yang saya cari,... thank sob, nanti malam saya coba ,,,

    BalasHapus
  104. kalo di wordpress bisa gak gan???

    BalasHapus
  105. hmmmm ,, . iya tuh baru ane cari di rombongan banyak padahal kan ane komennya di atas, , piss deh mas :*
    :D

    BalasHapus
  106. To Sakahayang Kang Asep : hehehe alhamdulillah ya sob ketemu juga :)
    To Bangjal Dua Tiga : makasih gan suport dan kunjungannya :)
    To DODE : ane gak tau sob kalau wordpress :)

    BalasHapus
  107. nice post gan,,oya kalo boleh saya mau tukeran link,,ini link saya
    http//blog.umy.ac.id/ghea
    kalo sudah terpasang kabarin yah,,terima kasih.. :D

    BalasHapus
  108. ow begitu ya sob, oya kalau yang Navigasi Breadcrumb ada gak?

    BalasHapus
  109. mantap gan tooltips nya,, bisa dicoba nih. (y)

    BalasHapus
  110. To ghea : pasang dulu linkku baru ane pasang link mu :)
    To Liandri : navigasi breadcrumb? ane blm posting gan
    To Resolusi Juara 2012 : iya sob memang mantap :) silahkan di coba :)

    BalasHapus
  111. hehehe keren juga sob, kalau ada tema yang unik. tips ini boleh di coba.
    farixsan tps memang mantab lagi hahahahaha
    happy blogging

    BalasHapus
  112. To Wisata Murah : hehehe iya sob di coba saja sob :)
    aduhh makasih ya gan supportnya :)

    BalasHapus
  113. kweren sob..klo ane test deh sob

    BalasHapus
  114. numpang tanya, supaya tooltip nya berada di tengah gimana ya gan ?

    BalasHapus
  115. To binkbenk : maksudnya sob? gak ngerti
    To 4JIE BLOG : untuk pa sob di letakannya di tengah :) hehe kalau di letakan di tengah beda lagi sob cssnya

    BalasHapus
  116. iya, kalau dikiri malah gak nampak tooltipnya...
    kalau dibuat ketengah, CSS apa yang harus di edit ?

    BalasHapus
  117. To 4JIE BLOG : kalau untuk ketengahin sepertinya sulit sob. tetapi untuk membuat jarak dari kiri tambahkan saja menjadi .tooltip {margin-left:20px; .....

    BalasHapus
  118. kapan2 aq coba ya sob insya Allah..., mantap ni :), thx ilmux gan...,

    BalasHapus
  119. To 4JIE BLOG : silahkan di coba cibi sob kalau begitu :)
    To Rohis Facebook : oke gan kapan kapan di cobain :) hehehe

    BalasHapus
  120. dicoba ya gan, untuk jquery.min.js itu yang terbaru ya gan

    BalasHapus
  121. To Belajar Komputer : enggak gan :) masih ada lagi yang terbarunya :)

    BalasHapus
  122. wah keren banget jquerynya bang...
    salam blogger

    BalasHapus
  123. To campor bawor : iya jquery memang keren bang :) saalam blogger juga :)

    BalasHapus
  124. Tutorial tooltips nya bagus bro, saya coba ya..THANKS! :)

    BalasHapus
  125. Nice gan desain artikelnya. . update terus ya informasinya
    salam sehat

    BalasHapus