Membuat tooltip sederhana menggunakan jQuery

Javascript jQuery

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>

Lalu buat jQuery untuk memproses perintah tooltipnya

<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>

Pastikan template sobat sudah tersimpan jQuery, Tambahkan sript diatas sebelum tag </body>
Simpan perubahan template anda.

Sedikit cara untuk penerapan pada template.

Untuk menerapkanya ke link posting seperti judul blog ini, silahkan cari kode

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

jika di dalam template sobat hanya berupa <data:post.title/> sebaiknya beri link seperti kode diatas dan tempatkan kode class='db-tooltip' dan expr:title='data:post.title' diantaranya seperti berikut:

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

ingat, kode <data:post.title/> ada dua, yaitu untuk judul posting dan judul halaman dibedakan dengan conditional cond='data:post.url' dan cond='data:post.link' anda bisa membuat pilihan, mana yang akan anda beri efek tooltip judul posting atau judul halaman bisa juga keduanya.

Cara penggunaan lainnya

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

Demikian semoga berguna dan bermanfaat...

2 komentar


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT:)
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.
Terima kasih telah berkomentar
Back to Top
Loading...