Simple Tooltip with jQuery - Ada sobat yang bertanya bagaimana cara membuat tooltip pada halaman
depan blog saya. 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 denganjavascript, 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.
Cara Bikin Auto Tooltip
Oke Hari Ini Saya Dicha Dwi Hanggara Pengen Ngeshare Cara Bikin Auto Tooltip
Caranya
1.Pasang jquery:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js' type='text/javascript'/>
Bila template blog sobat sudah memasang lewati langkah pertama,dan usahakan versi jquery yang terbaru,oke
2.Simpan kode dibawah ini tepat diatas kode </body> :
<script type='text/javascript'>//<![CDATA[ $(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 memperindah tampilan berikan sedikit sentuhan CSS,simpan kode dibawah ini tepat diatas kode ]]></b:skin> :
.tooltip {display:none;position:absolute;border:1px solid #333;background-color:#161616;border-radius:3px;padding:5px;color:#fff;font-size:14px !important;}
4.Lalu save
Panduan Menggunakan 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://se0bloging.blogspot.com
" title="Blogger Tutorial">Blog Seo Blogging</a>
<p class="masterTooltip" title="Ini adalah contoh tooltip pada tag p">Contoh tooltip pada tag p</p>
Selamat mencoba ^_^
Title : Pengenalan Auto Tooltip Jquery
Description : Simple Tooltip with jQuery - Ada sobat yang bertanya bagaimana cara membuat tooltip pada halaman
