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 :)

146 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. To Zh!nTho : hehehe iya sob boleh banget :) silahkan dicoba :)

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

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

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

    Thanks sob..

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

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

    BalasHapus
  15. Komentar ini telah dihapus oleh administrator blog.

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

    BalasHapus
  17. keren sakali ni trik ane jadi kagum sangat

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

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

    BalasHapus
  20. Wahh,, Nice Share n Nice Tipss

    Praktek langsung

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

    BalasHapus
  22. =)) 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
  23. 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
  24. wah, ketinggalan.. tak coba ah..

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

    BalasHapus
  26. 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
  27. Mantapp,, bro ngejreng efek jquerynya. blog aku belum jadi mass.. jadi gak ada identitas. ntar ya kalau udah ada bloknya ;;) :>

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

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

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

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

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

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

    BalasHapus
  34. wah ane jadi tambah ilmu lg nih, lumayan ribet juga ya baca kodenya (˘ڡ˘)

    BalasHapus
  35. 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
  36. To awelqq : waw berhasil ya gan :d selamat deh sob :)) huahahhaa

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

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

    BalasHapus
  39. 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
  40. 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
  41. To Liandri Eko : tooltips untuk lebih erlihat hidup dan keren sob. Ane sudah posting sob tentang menambah title pada semua judul DISINI

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

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

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

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

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

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

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

    BalasHapus
  49. sambut pagi hari yang indah dirumah sahabat

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

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

    BalasHapus
  52. 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
  53. mejeng2 lagi ahh dimari,, wakwakwak =))

    BalasHapus
  54. hahay special ya sob :Love lah wkwkwk

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

    BalasHapus
  56. 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
  57. 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
  58. 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
  59. To BLOGCUNAYZ : iya sob special banget untuk sobat :Love
    To Paypal VS Ayu Ting Ting : hehehe iya sob =)) makasih ya komentarnya

    BalasHapus
  60. saing hari disini lagi semoga mas farixsan senang

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

    BalasHapus
  62. Saya masih belajar yang namanya jquery

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

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

    BalasHapus
  65. 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
  66. Ini Blogku & Blog'e Cah Nganjuk HADIR DISINI serta mensupport blog sobat agar trs berkarya...keep write sob biar cpt dpt pr dr google :)

    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. hadir.,

    jgn lupa mampir yahh.

    BalasHapus
  78. baca baca postingan sobat lagi ah :D

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

    BalasHapus
  80. dateng lagi ni sob, semoga kau bahagia

    BalasHapus
  81. kunjungan perdana gan....
    ditunggu kunjungan baliknya...

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

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

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

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

    BalasHapus
  86. wih..sangat bermanfaat mas farix...

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

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

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

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

    BalasHapus
  91. mikum2 ada orang gak ya??

    dah tidur kali ya :))

    yaudah good night masbro =)) =))

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

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

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

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

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

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

    BalasHapus
  98. 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
  99. ahhaha, sipp de gan..
    monggo kalo mau kesini yuk dimari..
    xixixi :)
    ane diskon dah..
    ahhahaha X)

    BalasHapus
  100. 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
  101. 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
  102. 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
  103. 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
  104. 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
  105. Ini yang saya cari,... thank sob, nanti malam saya coba ,,,

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

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

    BalasHapus
  108. 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
  109. custom post nya mana,, =))

    BalasHapus
  110. 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
  111. ow begitu ya sob, oya kalau yang Navigasi Breadcrumb ada gak?

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

    BalasHapus
  113. 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
  114. hehehe keren juga sob, kalau ada tema yang unik. tips ini boleh di coba.
    farixsan tps memang mantab lagi hahahahaha
    happy blogging

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

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

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

    BalasHapus
  118. 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
  119. iya, kalau dikiri malah gak nampak tooltipnya...
    kalau dibuat ketengah, CSS apa yang harus di edit ?

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

    BalasHapus
  121. oke deh, saya coba dulu ya gan :D

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

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

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

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

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

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

    BalasHapus
  128. Balasan
    1. wkwkw ngapain gan pake crot segala

      Hapus
  129. keren ni sob, thanks ya..

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

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

    BalasHapus