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/

88 komentar

akhirnya kang ismet posting tutorial ini. sudah saya tunggu2. Terima kasih kang langsung saya coba!! =D

Balas

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

Balas

Muhunkang.. pami nu caket Pasteur eta ToolPadalarang.... :) keren blogna lang :-bd

Balas

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.

Balas

=D =D =D =D ahahaha .. TOL kang etama TOL ! =(

haha nuhun kang , sae atuh da resource na ge di blog saha heula ? :-bd update terus kaang .. tong bosen , kaping 3 dongkap kang ? Bandung Lautan (.id)

Balas

gak salah klik kalo udah masuk blog nya kang ismet ! .. haha belum pernah "mis" nih baca tutorial nya kang ismet , akurat semua :-d

Balas

aku kira pake yang auto, ternyata manual ya utk nampilin tooltip nya.
but nice info banget dee.... :-d

Balas

Wah keren juga pakai beginian, btw slh satu bentuk seo juga ya Kang? Ijin sedot ya Kang...(Silahkan Super Man) :D

Balas

ini dia yang saya cari cari, makasih kang :)

Balas

Keren Banget kang tooltipnya.. ijin pake yaa :D

Balas

kang gimana cara judul postingan brda di bawah gambar, macam blog ini Kang ?
mohon share ya ? :)

Balas

hehehe tebih kang, aya acara naon tah?

Balas

hehehe.. "mis" teh singkatan "misleuk" nya =D... alhamdulillah sob, sebelum saya share selalu ujicoba dulu

Balas

kalau untuk thumbnail sudah otomatis sob, karena udah di tambahkan kode otomatis di template, ga usah nambah class sama title pas upload image

Balas

benul sahabat super :)

Balas

ketemu jug akhirnya ya...

Balas

dipindah di posisi HTML pada templatenya sob...

Balas

terima kasih atas info nya kang :D

Balas

Tool tips itu untuk nampilin title gambar atau tulisan gtu ya, kang?
Maaf nanya nubie muluan @@,

Balas

Dulu pernah gunakan ini di template lama, sejak ganti sudah tidak ingat lagi akan scriptnya

Balas

sudah saya terapkan sob, namun kok gak muncul ya?

Balas

betuuuuul.... bisa juga untuk singkatan, gelar dll

Balas

kan udah ada lagi di atas :)

Balas

dipasangnya dimana ya? ada contoh kode?

Balas

hehe , abdi ge dapet broadcast email ti www.pandi.or.id , saur na pami bade ngiring sok ceunah di antos di Kampus ITB bandung , kaping 3-6 Juli 2013 , seputar website kang hehe ( Seminar , Workshop , Pameran ) info lengkap na palih dieu kang → http://bandung.lautan-id.web.id/

hayu atuh , hoyong pendak kang abdi :D

Balas

poropesionaaal pisaaan tah nu kitu teh kang , ahahaha ! .. teu salah manggih tutorial saya ddieu mah.. amsyong weh pokona mah .. haha ahiww :D

Balas

tinggal dimodif lagi cssnya biar lebih tampan...

Balas

javascript pada </body>, dan CSS simpan seperti biasanya, tapi yang koding terakhir ini saya masih kurang pasang sob, kodi ini maksudnya harus disimpan mana?

<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"/>


kodi ini seharusnya diterapkan pada postingan ya, atau harus pasang dimana? binggung sob..

Balas

Saya pribadi doyan banget sama tooltipnya, berharap kedepannya ada full tooltip otomatis utk link n images, khusus nya yang memakai syntax title aja gitu.. :D

Balas

Focus saja sama Class dan Attribute Title="#" nya sob ..

mau di halaman posting / widget juga sama aja , maksud kang ismet mungkin seperti ini cara pemasangannya :

Misalkan buat postingan berita lewat html ..

( Berita Terhangat ) Eyang Subur sukses mendapatkan gelar playboy karena telah <a title="Poligami adalah Menikahi lebih dari 1 orang Istri." class="masterTooltip" href="#link">Poligami</a> .! *setajamsilet* :D hehe

seperti itu kurang lebih :D hehe , betul ora kang ismet ?

Balas

Betul sob.. seperti contoh yang kang rian buat..
supaya otomatis muncul pada setiap thumbnail, ganti kode :

<a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>

dengan :

<a class='masterTooltip' expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>

Balas

wah.. terima kasih masukannya kang ismet dan kang rian. langsung coba nih

Balas

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

Balas

sudah seperti kang ismet berikan solusinya, namun juga ga muncul kang...

Balas

wawwwww..........
semakin keren saja nie kang bisa saya coba nie kang :)

Balas

tipenya magazine sih.. jadi banyak yang harus di tambahkan

Balas

untuk editing CSS di serahkan masing2 :)

Balas

ok makasih sob atas petunjuknya :)

Balas

ntar dech tak utak atik dikit biar lebih muantap kang yang jelas trima kasih buat tutornya.... :-bd

Balas

Tah eta, alus kang lumayan jadi referensi mah :)

Balas

Eh iya kang , mau ngasih kripik nih buat syntaxhighlighter di komentar blog kang ismet :D , kalo di browser firefox attribute "pre" nya gak "wrap"! :( cuman support di browser chrome aja wrap nya ..

ini ada sedikit css kang biar wrap text di atribute "pre" nya support di semua browser ( Semoga Bermanfaat )

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}


saya nyuri di css-tricks.com :D

Balas

nuhun kang... saya jarang buka FF jadi jarang ke kontrol :-bd

Balas

waaah, mantaaap syudah responsive kang ! .. hehe iya sih gapapa kang , cuman kan gak semua blogger open chrome :( .. contoh nya saya , pemuda labil yang kadang2 pake firefox kadang2 pake chrome :D

Balas

kang mau tanya aja, kalo halaman arsip blog sebaiknya dikasih

rel="noindex"

gak ya?

Balas

Tambahan kecap kang ameh aya rasaan...... =D
Hehehe

Balas

ulah amke tooltip, sarungan weh tuluy salimutan...wekekekekkk

Balas

ke bulan puasa kang :)

Balas

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

Balas

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'>

Balas

wah... kurang tau kalau masalh robot inxing sob :)

Balas

asem tuh tultip yang punyaku malah diintip dan dipakai di seksi komentar wkwkwkwk

Balas

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?

Balas

caranya gmna kang ? gk ngerti saya soal script script nya :)

Balas

aduh... gimana lagi ya? soalnya perasaan saya penjelasan diatas sudah cukup jelas deh... coba fahami lagi

Balas

Kang, kalau yang ini teh buat apa?
$(document).ready(function() {
});


Soalnya banyak ngaruhnya~~~~

Balas

tergantung fungsinya sob... itu kan JS

Balas

banyak tutornya ko di om gugel :)

Balas

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

Balas

Baru tahu nih istilah "tool tip", hehehe

Balas

saya juga gak muncul kang, apa masalah templatenya ??

Balas

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

Balas

saya liat kebanyakan jQuery di templatenya... coba ke sini http://blog.kangismet.net/2013/04/menambahkan-jquery-pada-template-blogger.html

Balas

Jadi kalo menambahkan widget yang ada Jquery nya gak usah banyak banyak ya kang. Oke oke dipraktekan dlu kang

Balas

Kang tetep aja kang gak bisa berubah, padahal sudah di remove semua selain di bawah tag

Balas

INFO HOT : Jika anda kesulitan membuat dan mendesain Blog Blogspot dan Website berbasis Content Management System (CMS), Kami menawarkan tangan untuk melayani pembuatan Blog Blogspot dan Website yang berkelas dan professional dengan harga yang sangat murah, silahkan dilihat paket dan fitur Web Desain kami di http://cybernetwebdesign.com :)

Balas

Ijin nyedot nya Kang ?. hayang abdi cobi. kajeun keyeeen :D
Dilanjuut.

Balas

kang ismet, bisa gk di buatin tooltip, ketika mouse berada di atas gambat, tooltipnya memperbesar gambar tersebut ?? terima kasih sebelumnya

Balas

kaya ini ya http://hohoketauan.blogspot.com/2013/04/demo-image-preview-dengan-jquery.html link tutorialnya ada dibawahnya :D

Balas

yupppp bener bngt mass, thankkk youuuu (Y)

btw itu bisa di atur kan kang besar gambar tooltipnya ?

Balas

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.title' height='120' src='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s160/picture_not_available.png' width='160'/></div></a>
</b:if>
</b:if>


bantuin donk kang...yg ada kode di template ane sepeti ini...

Balas

Kang...
Cara masang (".tooltip"..... sampai "}") di mana kanga?

Balas

kang kalo ukuran gambarnya besar nanti kan tampilan gambar tooltipnya jadi besar juga,,kalo tampilan gambar tooltipnya di kecilin gimana kang?

Balas

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

Balas

sama seperti di blog ane gan.. tetep gak muncul" T-T, blog ane pakai template Apriezt

Balas

informasi yang bagus mas

Balas

Poskan Komentar


×
Chat