KEBEBASAN BERPIKIR
Home » » Cara Membuat Tooltip Otomatis Pada Semua Tag 'Title' Dengan Script

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

Written By dan ipul climber on Sabtu, 20 Juli 2013 | 21.09


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;
$(&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>
  • Simpan Templatenya Dan Lihat Hasilnya
Share this article :

0 komentar:

Posting Komentar

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. 543598 - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger