Cara Membuat Tooltip Teks Simple

Tooltip merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor pointer mouse di arahkan pada sebuah komponen item atau link atau gambar yang mempunyai title text dalam sebuah website atau blog. 

Untuk demo arahkan cursor pada gambar dan link dibawah ini:

Cara Membuat Click To Select All

Cara Membuat Tooltip Teks Simple :

1. Pertama, Masuk ke Dasboard blog Sobat Tekno masing-masing, klik "Template" lalu "Edit HTML".

2. Kedua,  Cari kode </body>, lalu paste kode JavaScript berikut ini tepat di atasnya:

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

3. Ketiga, Yaitu penambahan kode css, letakkan kode berikut diatas kode </style> atau ]]></b:skin> :

.rush-simple-tooltip{display:none;position:absolute;border:1px solid #071585;background-color:#1e90ff;
padding:5px;color:#fff;font-size:14px !important;box-shadow:0 1px 2px black;}

Sedangkan contoh penggunaan seperti contoh demo diatas:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdDJnNSvqdbrCkNfUHrUj8Wg0fG3cQGnTsMgNw8lSilzbl9DFs5gDJjZWi-WXu5qmQrjAizT5feS6jVXjaTfiB9jiq1R0AaJjC08o5BogtwVYJFTpb2JDC_4BCW2jELARYXnCF8suvdFs/s1600/Tooltip-simple.jpg" title="Cara Membuat Tooltip Simple"><img alt="Cara Membuat Tooltip Simple" class="rush-tooltip" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdDJnNSvqdbrCkNfUHrUj8Wg0fG3cQGnTsMgNw8lSilzbl9DFs5gDJjZWi-WXu5qmQrjAizT5feS6jVXjaTfiB9jiq1R0AaJjC08o5BogtwVYJFTpb2JDC_4BCW2jELARYXnCF8suvdFs/s1600/Tooltip-simple.jpg" title="Cara Membuat Tooltip Simple" /></a>
<a class="rush-tooltip" href="http://rush-die.blogspot.com/2014/07/cara-membuat-click-to-select-all.html" target="_blank" title="Cara Membuat Click To Select All">Cara Membuat Click To Select All</a>


4. Selesai.

Selamat mencoba, Cara Membuat Tooltip Teks Simple