Cara Membuat Tooltip Otomatis Pada Semua Tag 'Title' Dengan Script

Ini hanya sebuah fitur tambahan untuk mempercantik blog/web dan membuatnya tampil beda, dimana sebagian situs besar seperti Kapanlagi.com sepertinya juga memasang tooltip khusus yang begitu menarik.

Buat yang belum pernah dengar, tooltip itu balon info yang muncul saat sebuah gambar atau link yang berisi tag tittle diarahkan oleh kursor. Bentuk default-nya seperti ketika sobat mengarahkan kursor mouse pada tab atas browser.

Tooltip kali ini menggunakan sedikit script, jadi bagi sobat yang merasa tidak begitu perlu ya tidak usah memaksakan kecantikan blognya.. :) karena ditakutkan akan sedikit memberatkan blog walau tidak banyak.

Jika sobat ingin mempraktikkannya, silakan ikuti langkah berikut ini, untuk demonya bisa arahkan pada link di blog ini yang mengandung tag title-nya.. :)

Berikut caranya :

• Login Ke Akun Blogger sobat
• Pilih Rancangan/Design
• Pilih EDIT HTML (tidak perlu mencentang Expand Template Widget )
• Copy kode berikut tepat diatas kode </head>

<style>#tooltip{width:200px;z-index: 10000000;position:absolute;background:#000;-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:#fff;border:1px dashed #ff0000;display:none;font-weight:bold}</style>

<script type='text/javascript'>

this.tooltip = function(){

xOffset = 10;

yOffset = 20;

$("a[title]").hover(function(e){     

this.t = this.title;

this.title = "";   

$(&quot;body&quot;).append(&quot;<p id='tooltip'>&quot;+ this.t +&quot;</p>&quot;);

$("#tooltip")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px")

.fadeIn("fast");

},

function(){

this.title = this.t;

$("#tooltip").remove();

});

$("a[title]").mousemove(function(e){

$("#tooltip")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px");

});

};

// starting the script on page load

$(document).ready(function(){

tooltip();

});

</script>

• Simpan Templatenya Dan Lihat Hasilnya