Tooltip Sederhana Menggunakan jQuery

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.


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

Comments

  1. gan membuat notifikasi ala google + gimana caranya??
    tolong di bantu. ane ganti templet jadi simple. tp pengen ada notif nya juga kaya di blog ini.
    ini blog ane matematikakuadrat.blogspot.com
    pengennya naro notifnya di atas huruf T
    tq

    ReplyDelete
    Replies
    1. Baca membuat notifikasi ala google + di http://jelasinblog.blogspot.com/2013/11/cara-pasang-notifikasi-komentar-blog.html

      Delete
    2. This comment has been removed by the author.

      Delete
    3. ada yang kurang gan.. apa yang perlu di tambah akan.. agar link artikel yang dikomentarkan tampil, seperti punya agan.

      Delete

Post a Comment

Popular posts from this blog

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template