Tooltip Sederhana Menggunakan jQuery

Bagaimana cara membuat tulisan muncul saat mouse diarahkan ke link atau gambar? Itulah yang disebut dengan tooltip.

Tooltip adalah tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website. Artikel kali ini menjelaskan bagaimana menerapkan tooltip menggunakan jQuery. Tooltip tanpa jQuery dapat Anda baca pada artikel Membuat Tooltip Menggunakan CSS.

Lihat contoh tooltip berikut. Arahkan cursor pada gambar atau link.

Jelasin Blog

Bagaimana membuatnya?

Letakkan CSS berikut di atas tag </b:skin>

/* tooltip */
.ll-simple-tooltip {
display:none;
position:absolute;
border:1px solid #071585;
background-color: #1e90ff;
border-radius:3px;
padding:5px;
color:#fff;
font-size:14px !important;
box-shadow: 0 1px 2px black;
}

Selamat belajar

Setelah itu simpan jQuery berikut di atas tag </body>

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

Bagaimana menggunakan tooltip dalam blog?

<a class="ll-tooltip" href="http://jelasinblog.blogspot.com" title="Tutorial">Jelas in Blog</a>
<p class="ll-tooltip" title="Menyisipkan tooltip pada tag p">Menyisipkan tooltip pada tag p</p>
<img class="ll-tooltip" title="Tooltip sederhana" src="gambar.png"/>

Jadi, caranya mudah saja. Anda hanya perlu menambahkan class="ll-tooltip" dalam link.

Selamat belajar :)