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

Amazing Easy Tooltips

Seperti yang saya jelaskan ketika saya posting tentang Tooltips juga disini [baca : Bubble Tooltips]. Tooltips adalah sebuah object yang menandai object lain dengan cara mengeluarkan sebuah tulisan lain yang bisa diartikan deskripsi dari sebuah object. Ini adalah postingan kedua tentang Tooltips Jquery. Yaitu Easy Tooltips. Tooltips kali ini berbeda dengan sebelumnya yaitu mengikuti kearah cursor pindah.

Perhatikan itu, gerakan kursor di Link itu. Rasakan dan Lihatlah apa yang akan terjadi. Rupanya link mengeluarkan kata kata ajaibnya yaitu title="Ini adalah contoh Easy Tooltips Jquery" . Title sebagai deskripsi/tulisan yang keluar dari sebuah link atau object lain. Tapi bagai mana bisa mengeluarkan Deskripsi yang berbeda tampilan itu? Kuncinya ada di bawah ini :
  1. Buka Akun blogger.com dengan password dan ID tentunya
  2. Saat di dasboard klik Layout/DesignEdit HTMLCari kode <head>
  3. Letakan kode berikut tepat di bawah kode Head :
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://sites.google.com/site/farixsantips/scripts/vtip.js"></script>

    <style type="text/css">
    p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }
    p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }
    </style>
    Kata bercetak tebal adalah kode Css/tampilan Easy Tooltips ini
  4. Berikutnya tinggal dimana sobat meletakan Object apapun dengan di tambah Class="vtip". Sebagai Contoh :
    1. Link →
      <a href="http:farixsantips.blogspot.com" class="vtip" title="Berikut adalah Blog tutorial">Farixsantips</a>
      Tulisan Merah adalah Url Link, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu.
    2. Gambar →
      <img src="URL_GAMBAR" class="vtip" title="Deskripsi dari sebuah gambar"/>
      Tulisan Merah adalah Url Gambar, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu.
  5. Selesai.
Semoga Easy Tooltipsnya bisa membantu dalam perawatan blogger sobat :), kurang lebihnya mohon maaf saya akhiri dengan wassalam :)

82 comments

  1. jah JQuery lagi... :P

    fungsinya hampir sama dengan Alt kan ??

    BalasHapus
  2. surimm =,=" gagal lagi dah. :(( :((

    BalasHapus
  3. ohiya itu tooltips kyk yg di blog ente ya faris..? :)) :)) keren tuh,, cocok gak ya buat tempe ane, =)) =))

    BalasHapus
  4. To Mbah Qopet dan Rama : Selamat Pertamaxnya meski ada yang ngaku ngaku pertamax :P
    To Mbah Qopet : ya emang Jquery :P terserah bro mau make atau gak kan cuman share :)) beda jauh lah alt untuk gambar
    To Rama : bukan ini yang biru, kalau yang di blogku warna hitam :|

    BalasHapus
  5. he.he kalo bukan JQ sih udah tak pake...berarti hampir sama donk :P

    BalasHapus
  6. neh maseh pakek mobile. .
    Gag kleatan demonya. . Besok kalo dah pakek PC kesini lagi ah . . Kayaknya bagus nih. . :)

    *minta kopi dulu boleh gan? . . Hahahahha ;D

    BalasHapus
  7. wah jadi keren y sob kalo pke ni script.

    BalasHapus
  8. Emang harus pakai karakter "vtip" ?
    Kalau lgsg title ngak bsa ya?

    Newbie .js :D

    BalasHapus
  9. hummm .. cuman putih doank ya?? tak kira kayak di gambarnya :>

    BalasHapus
  10. wawakwakwak,, iya faris ane udah tau kok,, :P :P ntar ane coba ahh kalo gak berat,, =)) =))

    BalasHapus
  11. TO ALL : MAAF ABIS PULANG SEKOLAH JADI LAMA BANALAS KOMENTAR.
    To Shinobi : memang keren bro
    To Gregorio : Hahaha kalau komen ojo spam bro :P
    To Mbah Qopet : halah bisa aja sih lu :))
    To Bayu : Kopinya silahkan diminum gan nih :)) bisa di edit css juga bro :-/
    To Liandri : iya sob keren keren :P
    To Aku mau gratisan : yaiyalah!! nanyanya aneh banget sih om :D vtip itu sumber class nya
    To Rama : hahahaha teliti sebelum meneliti bro =))

    BalasHapus
  12. Sangat inofatif sob..!
    Tapi nambahin berat blog nggak ya..?

    BalasHapus
  13. Ih keren..kalo ada kayak ginian itu bisa bikin berat blog nggak?

    BalasHapus
  14. To prapatan kretek dan arr rian : cobain dulu, kalau berat copot lagi :D [kurasa gak berat]
    To Danu Akbar : boleh boleh boleh :))

    BalasHapus
  15. Tukeran link yuk Sob, link sudah saya pasang di blogroll ane
    thanks

    BalasHapus
  16. ada yg salah kah kata2ku, jangankan judul artikel n isinya bahkan kode2 itu aku perhatikan dann aku ingin nyoba bbagusnya tooltips ini hmmmmm

    BalasHapus
  17. Tips yang menarik sob, link blog terpasang sekalian follow ya sob

    BalasHapus
  18. wih keren banget sob, sepertinya pas jika diterapkan di blog saya dech...

    BalasHapus
  19. To earth : udah succes bro :)
    To anisayu : maksudnya.... yaudah deh :) gak apa apa :) maafi aku ya :( liat postku sebelumnya deh
    To musa : hehehe sangat simple :P
    To Kerajaan air mata : thanks ro, segera dilaksanakan :)
    To Asis Sugianto : diterapkan saja om :)

    BalasHapus
  20. blog ini juga keren banget sob.
    lanjutkan share tutornya,

    BalasHapus
  21. Bisa mengartikan atau memperjelas objek yang kita tunjuk.Asyik nieh sob tutornya.Makasih yach,happy blogging.

    BalasHapus
  22. sumpeh mas gak ngarti,love,peace and gaul.:((

    BalasHapus
  23. To Zona Download Gratis : thanks bangetz ya om :)
    To Er'end : memang asyik nih , bisa di terapkan di blog ente juga :P
    To saryadinilan : itu ada contohnya yang berkedap kedip itu

    BalasHapus
  24. Boleh juga kirain g ada demonya hehehehe

    BalasHapus
  25. keren jadinya, ntar dicoba deh, makasih mas udah share :)

    BalasHapus
  26. To Zh!nTho : di blog tutor pasti ada demo lah sob :)
    ToTituitbom : thanks juga udah supportnya :)

    BalasHapus
  27. mntap ini
    lengkap sama previewnya :D
    makasih masbro

    BalasHapus
  28. oke gan , , makasih ya gan kopinya, , :)

    oiya seh, , manteb manteb!

    BalasHapus
  29. boleh juga nih di coba tuh tooltipsnya,,,, so seandainya juga itu bisa di terapkan di judul blog ya,, ups ato emng bisa juga akah

    BalasHapus
  30. To Dayz : iya preview selalu ada :D
    To Bayu : kopinya enak kan? kopi luwak :P
    To Alkahfi : semua kode html yang di beri sentuhan class="vtip" jadi om

    BalasHapus
  31. hmmmmbermain dengan CSS n JQUERY emang ga ada abis abisnya yah sob ... butuh keuletan n imajinasi juga hihihih mksh tipsnya ... boleh dicoba ini sekalian menghemat space juga buat postingan klo klo gambarnya butuh penjelasan panjang lebar :)

    BalasHapus
  32. To Green KLOPERER : memang tidak ada habisnya jika dikombinasikan dengan script lagi :D silahkan :D

    BalasHapus
  33. Kunjungan malam sambil ngemil sob..... heheh

    Nice info

    BalasHapus
  34. wahh asik sob ijin nyoba ilmunya

    BalasHapus
  35. wah keren sob,,,
    ane izin nyoba dulu ;;)

    BalasHapus
  36. To Abdugreen : yayaya.... thanks
    To binkbenk : silahkan dicoba ilmunya :P
    To A-NX : silahkan di coba triknya :)

    BalasHapus
  37. moga bermanfaat bagi banyak orang nih mas.. sukses terus buat mas nya :)

    BalasHapus
  38. Sob, apa tooltip kaya gini bisa jalan untuk seluruh browser? coz pernah coba dengan selain FF kadang ada yang ga jalan.. :(

    BalasHapus
  39. gagal pertamax.
    Mastah tooltipnya kok ga jalan ya?dimana yang salahnya saya nih ^_^

    BalasHapus
  40. To Majalah Masjid Kita : ya om sukses terus :)) thanks ya om
    To SEM : bisa jalan disemuah browser kok, cuman stylenya seperti css3 gak semua sob :D
    To BOB : orang bisa kok mas. mungkin ada kode yang ketinggalan kali,

    BalasHapus
  41. sipp gan.. ane pernah make tool tips yg otomatis.. syangnya setelh beberapa hari dah gk bekerja. n membuat loading blog tersa berat. setelah ane hapus eh trafik tiba2 banjir lagi neh.. mungkin klo pke kode yg ini gak zaw? ea boleh ikutan tukar link gak sob?? di pasang di footer blog ini ky tmen2 juga.. :D?

    BalasHapus
  42. ane bisa ndak minta theme kaya blog ini gan?? bagus banget neh.. soalnya blog ane baru n belum ada theme yg pas

    BalasHapus
  43. tips manfaat sobat. thanks sdh kunjung ya.

    BalasHapus
  44. To Tutorial SEO : ohhhh mungkin terlalu banyak kode jquery yang lainnya mungkin :) boleh banget tuh di fooeter :)
    To syaiful khobir : kayaknya blogku khusus saya aja yang make deh bro :) itu theme kerja keras ane dari awal [buta kode css dan html] sampe saat ini sob :) perjuangan mati matian [halah kwkwwk]. jadi mohon maaf ya bro :)
    To Drummer : thanks ya bro :) sama sama

    BalasHapus
  45. tutorial yang keren nih mas bro,,,. btw minta theme dong bro

    BalasHapus
  46. saya suka desain blockquote.nya..hehe
    mantapp boss..
    lanjutkan kreasi blognya.

    BalasHapus
  47. Pena hadir dan absen malam dan langsung dipraktekkan alhamdulillah berhasil...
    Terima kasih sob atas tipsnya nih..sukses selalu sob

    BalasHapus
  48. To Anonim : maaf bro template ane khusus untuk ane aja, tidak untuk mum :)
    To Purbojati : thanks bro hihihi. siap :))
    To tautanpena : alhamdullilah berhasil :) sukses juga om :)

    BalasHapus
  49. Beratin loading ndak sob...blog nya udah keberatan soalnya.Pengin nyoba juga sich

    BalasHapus
  50. kalau berkunjung ke blog sahabat ini pasti disuguhi tips yang bagus...Makasih

    BalasHapus
  51. To cardiacku : untuk semua blog beda beda bro, kalau jquerynya dikit mungkin gak
    To ibnu : hheeheh bisa aja sih mabro :D

    BalasHapus
  52. To Aku Mau Gratisan : Sabar lah om, lagi mikir mikir ini bro :D hahaha

    BalasHapus
  53. nice share gan .... , di tungu artikel menarik lainnya :)

    BalasHapus
  54. nongkrong dlu aah, sambil nungguin news post nya ... :D

    BalasHapus
  55. wahh belom update2 nih adminnya,, =)) =)) ditunggu post anyarnya sob,, :)) :))

    BalasHapus
  56. Hahaha..Komentatornya rebutan PERTAMAX ya??
    Saya gag begitu js mas, bikin lemot blog.
    Hehehe

    Tapi makasih ya..

    BalasHapus
  57. To bhotol : thanks gan jgn komen kentut dong :D
    To Shinobi dan Rama88 : oke siap update deh hari ini :D
    To Kopiah putih : tau tuh :| ohh gitu ya yasudah :D

    BalasHapus
  58. datang kembali dan ucapkan terima kasih telah memajang link sehat kita semua disini.
    Link sobat juga sudah terpasang...laporan selesai

    BalasHapus
  59. to cardiacku : sama sama bro :) terimakasih juga sudah memasang link saya :)

    BalasHapus
  60. mantep sobb..eieie..agan rama n mbah Qopet ane donk yang pertamaxxx.....dari bawah tapi hihihihi...=))

    BalasHapus
  61. To binkbenk : hahahahah ayo mas rebut dari mereka :D

    BalasHapus
  62. that's relly nice post :)..
    tahnk you..

    BalasHapus
  63. Ia sob ane dah ilangin verifikasi chaptanya?? coba lagi sob kalau susah juga kasih tau ane lagi ;) Terima kasih dah bagi saran :)

    BalasHapus
  64. To socafahreza's blog : thanks back :))
    To Deganshah Putra : wahhhh iya tuh sob ane dah komeng dah gak ada chaptanya :D terimakasih juga untuk responsifnya :)

    BalasHapus
  65. bisa buat belajar nih ... aku jadikan inspirasi yach ...
    makasih buanyaaakkk ....

    BalasHapus
  66. To Admin - Ari Software : thanks juga untuk kunjungannya :)
    To Dhafian : hehehhee alhamdullilah jika bisa di jadikan inspirasi :)
    To Syndicate OS : itu ada kok demonya, "LINK TOOLTIP"

    BalasHapus
  67. wah di link ama gambar dapat di beri tool tip ya? ini yang gw cari. blognya bagus.

    BalasHapus
  68. To iya gan bisa gan dua duanya :) makasih banyak ya pujiannya :) aduhh senyum sendiri

    BalasHapus
  69. Pena hadir dan absen sore sobat...
    Setelah berganti template pena mencari tips yang dulu pernah pena gunakan yaitu mengenai ini sobat...

    BalasHapus
  70. To tautanpena : wah mntap ya sepertinya sobat templatenya :) selamat ya

    BalasHapus
  71. Terima kasih atas infonya, nanti akan saya tambahkan juga ke dalam blospot saya

    BalasHapus
  72. Bagus-bagus semua tutorial di blog ini! NICE..

    BalasHapus