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 :Blog Kang Ismet
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://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...
Resource: http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/