Membuat tooltip otomatis disetiap tittle blog

Membuat tooltip otomatis disetiap tittle blog -  Tooltip memang berguna untuk mempercantik pemandangan dari blog itu sendiri. Tooltip, yang digunakan secara manual alias tidak otomatis, biasanya cukup merepotkan. Merepotkan karena anda harus membuat teks yang ada di tooltip satu-persatu.



   Sekarang, teknologi berkembang cepat. Tidak hanya didunia nyata saja. Namun, juga terjadi didunia bloging. Kemajuan teknologi bloging, salah satunya adalah membuat widget otomatis. Yah, itung - itung nggak pakek susah-susah lagi ngedit widget. Begitu juga dengan widget kali ini. Yiatu tooltip otomatis.

Cara Pembuatan Widget
1. Login blog.
2. Template.
3. Edit HTML -> Lanjutkan.
4. Centang Expand Template Widget.
5. Copas kode dibawah ini, tepat diatas tag </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>

Keterangan :
a). Kode yang saya beri warna merah adalah style widget. Silahkan memodifikasi sesuka hati anda.
b). Untuk mengganti backround tooltip dengan gambar, perhatikan kode yang saya beri blok kuning. Ganti dengan :

Image-background:url(URL Gambar disini)

6. Save template.