Simple Tooltip dengan jQuery

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.


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