GO Blog

Sebenarnya ada banyak cara untuk membuat tooltip, tidak hanya satu trik saja yaitu bisa dengan pseudo elements, dengan gaya CSS3 juga dengan javascript. Tooltip merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website/blog.

Untuk kali ini, saya akan berbagi membuat tooltip dengan jQuery walaupun ini sudah bukan bahasan baru tapi mungkin ada kawan blogger yang belum tahu dan untuk itu silahkan ikuti caranya dibawah ini:

Pertama silahkan login ke akun Blogger anda
Pilih Template lalu Edit HTML
Sekarang kita buat CSS terlebih dahulu untuk tampilan tooltipnya seperti berikut

/* tooltip */
.db-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;
}

Silahkan anda ubah sesuai keinginan dan tempatkan di atas </b:skin>

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

<a expr:href='data:post.link'><data:post.title/></a> atau <data:post.title/>

<a class='db-tooltip' expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>