Cara Buat Tooltip Melayang (otomatis)

Cara Buat Tooltip Melayang (otomatis)
Cara Pertama:
Login Ke Akun Blogger sobatPilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )Copas KOde Berikut Tepat Diatas KOde </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;
$("a[title]").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>
"+ this.t +"</p>
");
$("#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.
Cara Kedua:
Login Ke Akun Blogger sobat
Pilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )
Copas KOde Berikut Tepat Dibawah KOde <body>

selanjutnya cari kode </body>
taruh kode di bawah ini tepat di atas nya

simpan .
dan lihat hasilnya .. sekian artikel tentang cara buat tooltip melayang

tutorialsamak

Rabu, 23 Juli 2014

0 Cara Buat Tooltip Melayang (otomatis)

0 komentar:

Posting Komentar

Follower

Cool Blogs

About Me

Total Pengunjung

Daftar Isi