Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Simple Tooltip dengan jQuery

Cara membuat tooltip pada gambar / image, atau link.
Simple Tooltip with jQuery - Ada sobat yang bertanya bagaimana cara membuat tooltip pada halaman depan blog saya. Apabila sobat menyentuh gambar (thumbnail) pada salah satu postingan saya, disitu akan muncul title dengan tooltip.

Sudah banyak tutorial tentang cara membuat tooltip ini, baik dengan javascript, atau pun dengan kehebatan CSS3, bahkan bisa membuat tooltip dengan menggunakan pseudo elements.

Saat ini saya akan menjelaskan bagaimana cara membuat Simple Tooltip dengan menggunakan jQuery. Tooltip ini bisa diterapkan pada berbagai tag, seperti link, p, img dsb.

DEMO
Contoh tooltip pada link :
Blog Kang Ismet

Contoh tooltip pada tag 'p':
Simpan Mouse di sini, ini adalah contoh tooltip pada tag 'p'

Contoh tooltip pada image :

Beberapa langkah mudah untuk menerapkan Simple Tooltip ini yaitu :

1. Pastikan template sobat sudah tersimpan jQuery. Kalau belum lihat DISINI
2. Tambahkan sript ini di atas </body>

<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});
</script>

3. Untuk mempercantik tampilan, simpan kode ini di atas (silahkan edit yang diperlukan)

.tooltip {
 display:none;
 position:absolute;
 border:1px solid #333;
 background-color:#161616;
 border-radius:5px;
 padding:10px;
 color:#fff;
 font-size:12px Arial;
}

Cara Penggunaan Simple Tooltip


Untuk menggunakan simple tooltip ini, sobat tinggal menambahkan class 'masterTooltip' dan tag 'title'. Di bawah ini merupakan beberapa contoh penggunaan Tooltip pada beberapa tag.

<a class="masterTooltip" href="http://blog.kangismet.net" title="Blogger Tutorial">Blog Kang Ismet</a>
<p class="masterTooltip" title="Ini adalah contoh tooltip pada tag p">Contoh tooltip pada tag p</p>
<img class="masterTooltip" title="Tooltip on image" src="image.png"/>

Semoga bermanfaat...

Resource: http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

86 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. akhirnya kang ismet posting tutorial ini. sudah saya tunggu2. Terima kasih kang langsung saya coba!! =D
    1. Silahkan sob.. :)
  2. mantapp .. oh ieu teh nami na tooltips kang :D hehe , pusing abdi milarian di searh engine GUGEL .. kedah ngetikeun keyword naon ! :( haha , hatur nuhun kang ..

    nyuungkeun penilai.an nya kang kangge blog abdi http://rian-nurherdian.blogspot.com , punten ah seu'eur resource ti blog kang ismet :D hhe
    1. Muhunkang.. pami nu caket Pasteur eta ToolPadalarang.... :) keren blogna lang :-bd
  3. Terbongkar juga rahasi tooltip disini sempat bingung juga dengan blog yang pernah saya kunjungi ketik disorot bentuk tooltip mantap saya kira bawaan templatenya ternyata rahasia sudah dibongkar oleh Kang Ismet.Thks Mas.
    1. gak salah klik kalo udah masuk blog nya kang ismet ! .. haha belum pernah "mis" nih baca tutorial nya kang ismet , akurat semua :-d
  4. aku kira pake yang auto, ternyata manual ya utk nampilin tooltip nya.
    but nice info banget dee.... :-d
    1. kalau untuk thumbnail sudah otomatis sob, karena udah di tambahkan kode otomatis di template, ga usah nambah class sama title pas upload image
  5. udah paakee kang.. hehe
    1. keyeeeen :)
  6. Wah keren juga pakai beginian, btw slh satu bentuk seo juga ya Kang? Ijin sedot ya Kang...(Silahkan Super Man) :D
    1. benul sahabat super :)
  7. ini dia yang saya cari cari, makasih kang :)
    1. ketemu jug akhirnya ya...
  8. Keren Banget kang tooltipnya.. ijin pake yaa :D
    1. monggo... silahkan..
  9. kang gimana cara judul postingan brda di bawah gambar, macam blog ini Kang ?
    mohon share ya ? :)
    1. dipindah di posisi HTML pada templatenya sob...
  10. Keren mas :-bd
    1. tengkyuuuu :)
  11. terima kasih atas info nya kang :D
  12. Tool tips itu untuk nampilin title gambar atau tulisan gtu ya, kang?
    Maaf nanya nubie muluan @@,
    1. betuuuuul.... bisa juga untuk singkatan, gelar dll
  13. Dulu pernah gunakan ini di template lama, sejak ganti sudah tidak ingat lagi akan scriptnya
    1. kan udah ada lagi di atas :)
  14. sudah saya terapkan sob, namun kok gak muncul ya?
    1. dipasangnya dimana ya? ada contoh kode?
  15. tinggal dimodif lagi cssnya biar lebih tampan...
    1. untuk editing CSS di serahkan masing2 :)
  16. wah tooltip nya mantab ...bisa di coba nich kang oh ya kang ini link crack PS 5
    http://www.mediafire.com/download/cqj44ari828lcwo/otomatis-crack.rar
    tinggal paste ke file penyimpanan restart langsung fullversion untuk trial PS5 nya download ke resminya aja adobe.com
    1. ok makasih sob atas petunjuknya :)
  17. wawwwww..........
    semakin keren saja nie kang bisa saya coba nie kang :)
    1. silahkan sob :)
  18. Tah eta, alus kang lumayan jadi referensi mah :)
  19. kang mau tanya aja, kalo halaman arsip blog sebaiknya dikasih

    rel="noindex"

    gak ya?
    1. wah... kurang tau kalau masalh robot inxing sob :)
  20. ulah amke tooltip, sarungan weh tuluy salimutan...wekekekekkk
    1. ke bulan puasa kang :)
  21. kang kalau pasang tooltip pada script ini gimnana ?
    <a expr:href='data:post.url'><script type='text/javascript'>
    document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
    </script></a>

    salah wae kang abdi masangna.
    Punten ah, nembe kadieu deui nyungken hapuntenna bade mayunan sasih shaum. :)
    1. Kamana wae atuh? hehee... sami2 kang... neda dihapunetn bilih aya kalepatan :)
      untuk tooltip, yang kode awal :
      <a expr:href='data:post.url'>
      tambahkan title, jadi :
      <a expr:href='data:post.url' expr:title='data:post.title'>
      tambahkan tooltip :
      <a class='masterTooltip' expr:href='data:post.url' expr:title='data:post.title'>
  22. asem tuh tultip yang punyaku malah diintip dan dipakai di seksi komentar wkwkwkwk
  23. mantap kang,dapet ilmu baru lagi kang mau nanya nih tentang check seo yang di chkme.com , pas saya liat ada yang error di website link. kira2 gambarannya seperti ini
    [img]https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/1045053_471350296289885_1809260651_n.jpg[/img]
    cara supaya tidak error lagi gimana ya kang?
    1. banyak tutornya ko di om gugel :)
  24. Kang, kalau yang ini teh buat apa?
    $(document).ready(function() {
    });


    Soalnya banyak ngaruhnya~~~~
    1. tergantung fungsinya sob... itu kan JS
  25. Kang ismet kalo ane ninggalin jejak di sini reply nya kaga masuk email ane yah ?

    kalo cara di atas buat wordpress gmana kang ? kan ga ada <data:type&quote bla bla bla bla gituh...mohon pencerahannya ...
  26. Baru tahu nih istilah "tool tip", hehehe
  27. Kang punya saya muncul tapi gak seperti punya akang malah tampilanya biasa [img]http://4.bp.blogspot.com/-tmJzmuQGGds/Ug4XYujYkuI/AAAAAAAAAoo/h-gfKJkxb8o/s1600/hantu.png[/img] . gimana dong kang
    1. saya liat kebanyakan jQuery di templatenya... coba ke sini http://blog.kangismet.net/2013/04/menambahkan-jquery-pada-template-blogger.html
  28. Kang tetep aja kang gak bisa berubah, padahal sudah di remove semua selain di bawah tag
  29. Ijin nyedot nya Kang ?. hayang abdi cobi. kajeun keyeeen :D
    Dilanjuut.
    1. mangga dicobian :)
  30. Thkz Sangat Bermanfaat :D
  31. kang ismet, bisa gk di buatin tooltip, ketika mouse berada di atas gambat, tooltipnya memperbesar gambar tersebut ?? terima kasih sebelumnya
    1. kaya ini ya http://hohoketauan.blogspot.com/2013/04/demo-image-preview-dengan-jquery.html link tutorialnya ada dibawahnya :D
  32. Saya coba pasang ko ga bisa kang ya...

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'><div class='postthumb'><script type='text/javascript'>
    document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&#39;<data:post.title/>&#39;));
    </script></div></a>
    <b:else/>
    <b:if cond='data:post.firstImageUrl'><a expr:href='data:post.url'><div class='postthumb'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' height='120' width='160'/></div></a>
    <b:else/>
    <a expr:href='data:post.url'><div class='postthumb'><img expr:alt='data:post.title' expr:title='data:post.t…
  33. Kang...
    Cara masang (".tooltip"..... sampai "}") di mana kanga?
  34. mantep mas
  35. kang kalo ukuran gambarnya besar nanti kan tampilan gambar tooltipnya jadi besar juga,,kalo tampilan gambar tooltipnya di kecilin gimana kang?
  36. kang.. kode di template saya tiba2 berubah semua.. tiap karakter petik (') berubah jadi &#39
    jadinya semua kodenya berwarna merah.. dan tooltip kang ismet jadi tidak bisa terpasang x__x
    apakah ada hubungannya? kalau ada bagaimana cara mengatasinya? trims
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.