Jumat, 09 Maret 2012

Cara Membuat Balon Tooltip Otomatis


By on 20.34

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.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

5 komentar:

  1. masa gan ga muncul, sobat sudah memberi title pada link nya kaya gambar di atas.kalau belum ya pasti ga akan muncl

    BalasHapus
  2. wah ga bermutu gan postingannya.. ga bsa nongol balonnya

    BalasHapus
  3. Melayang Gimana gan,,, emang gitu tampilan nya gan

    BalasHapus