Tooltip Sederhana Menggunakan jQuery

Banyak sekali tutorial yang membahas tentang cara menampilkan tooltip menjadi tampilan yang lebih menarik, enak dipandang dan lain dari yang biasanya. Ada yang menggunakan kode JavaScript, CSS3, maupun menggunakan kode jQuery. Dan pada postingan ini saya akan berbagi trik sederhana tentang cara menampilkan dan mempercantik tampilan tooltip menggunakan kode jQuery. Tertarik untuk mencoba?

Simple Tooltip With jQuery

Membuat Template Cadangan

Sebelum masuk ke proses modifikasi kode template, ada baiknya kita buat terlebih dahulu template cadangannya sebagai antisipasi jika nanti terjadi error kode.
(baca:Cara Membuat Cadangan Template Blogger)

Menambahkan Kode jQuery

Pastikan bahwa di dalam template blog sudah atau belum terinstall jQuery. Jika belum maka tambahkan kode jQuery berikut ini di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>

Jika sudah, maka kita abaikan saja. Penggunaan jQuery di dalam template tidak boleh lebih dari satu. Hal ini untuk menghindari terjadinya bentrok antar script sehingga akan menyebabkan beberapa fungsi jQuery tidak bekerja.

Menambahkan Potongan Script jQuery

Salin kemudian tempel kode berikut ini di atas kode </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>

Mempercantik Tampilan Tooltip

Supaya tampilan tooltip nantinya menjadi lebih menarik, kita bisa menggunakan kode CSS dan Anda bisa memodifikasinya sesuka hati sesuai dengan kreatifitas Anda sendiri.
Salin dan tempel kode CSS berikut di atas kode ]]</b:skin>

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

Menampilkan Tooltip

Supaya tooltip ini bisa tampil pada blog, maka kita perlu menambahkan class 'masterTooltip' dan tag 'title' pada kode HTML yang telah kita tentukan. Sebagai contoh kita ingin menampilkan tooltip pada gambar. Kode HTML awal sebagai berikut.

<img src=".../image.png"/>

Setelah disisipkan class class 'masterTooltip' dan  tag 'title', hasilnya seperti di bawah ini.

<img class="masterTooltip" title="Tooltip saya pada gambar" src=".../image.png"/>

Penggunaan tooltip ini tidak terbatas pada gambar saja, kita menampilkannya pada tag yang lain misalnya pada paragraph dan link.

Penggunaan Tooltip Pada Paragraph

<a class="masterTooltip" href="http://ell-moo.blogspot.com/" title="Blogger Tutorial">Ellmoo Blog</a>

Penggunaan Tooltip Pada Link

<a class="masterTooltip" href="http://ell-moo.blogspot.com/" title="Blogger Tutorial">Ellmoo Blog</a>

Semoga Bermanfaat

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

Tweet

Postingan terkait:

Ditulis EM — Thursday 4 July 2013 — Add Comment — jQuery