Simple Tooltip dengan jQuery

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 :
Tutorial Blogspot

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://septiantb.blogspot.com/" title="Blogger Tutorial">Tutorial Blogspot</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...

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post