Cara Membuat Tooltip Otomatis Di Semua Title

Cara Membuat Tooltip Otomatis Di Semua Title - Kalau sebelumnya saya pernah posting tentang Cara Membuat Tooltips Dengan Jquery kali ini saya mau share Cara Membuat Tooltip Otomatis Di Semua Title. Kalau dulu, kita harus memasukkan kembali syntax HTML agar tooltips muncul, namun kali ini gak perlu capek-capek memasukkan syntax HTML lagi kedalam postingan. Sebab, tooltip ini hadir secara otomatis dan hanya mendeteksi link/gambar yang memiliki title. Jadi, cukup dengan menambahkan title di masing-masing gambar/link dan tooltip akan tampil. Oh ya untuk preview nya bisa liat gambar dibawah ini.

Cara Membuat Tooltip Otomatis Di Semua Title

1. Login terlebih dahulu ke akun blogger anda
2. Pilih Template -> Edit Template
3. Masukkan kode dibawah ini, dan letakkan sebelum </head>

<style>#tooltip{width:200px;text-transform:capitalize;z-index: 10000000;position:absolute;background:#444;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-o-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -webkit-transition:0.5s ease-out;padding:2px 5px;font-size:12px;color:#000;border:1px dashed #ff0000;display:none;font-weight:bold}</style>
<script type='text/javascript'>
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$(&quot;a[title]&quot;).hover(function(e){
this.t = this.title;
this.title = &quot;&quot;;
$(&quot;body&quot;).append(&quot;<p id='tooltip'>&quot;+ this.t +&quot;</p>&quot;);
$(&quot;#tooltip&quot;)
.css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)
.css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;)
.fadeIn(&quot;fast&quot;);
},
function(){
this.title = this.t;
$(&quot;#tooltip&quot;).remove();
});
$(&quot;a[title]&quot;).mousemove(function(e){
$(&quot;#tooltip&quot;)
.css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)
.css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;);
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
</script>

NOTES !

• Kode yang bercetak tebal (Bold) merupakan css dari tooltip ini, kamu bisa memodifikasi nya sesuka hati.
•  Untuk mengganti backround tooltip dengan gambar, perhatikan kode yang saya beri warna merah, ganti dengan :  Image-background:url(URL Gambar)

4. Simpan, semoga bermanfaat ya :)