Cara Membuat Balon Tooltip Otomatis - Kali ini saya akan Cara Membuat Balon Tooltip Otomatis - Kali ini saya akan berbagi Tips Blog yaitu Cara Membuat Balon Tooltip Otomatis kalian tahu apa maksud Balon Tooltip itu, Balon Tooltip itu maksudnya memberi Efek Balon Tooltip ke Semua Title yang ada pada Link di Blog kaya gambar di bawah ini supaya lebih jelas lagi.

Lihat Teks "Kumpulan Widget Untuk Mempercantik Blog" pada gambar di atas, itulah yang disebut Balon Tooltip, bagi sobat yang pingin tahu cara membuat dan mempercantiknya silahkan perhatikan langkah-langkah di bawah ini.

• Copy Kode di bawah ini dan letakan di atas kode </head>

<style>#tooltip{width:200px;text-transform:capitalize;z-index: 10000000;position:absolute;background:#fff;-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:#ff0000;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>

Script yang berwarna merah sobat boleh edit tampilan nya sesuai keinginan sobat sendiri.
Selamat Mencoba Sob.