"MCHOYBLOGINFO". Diberdayakan oleh Blogger.

Info Cara Buat Tooltip Melayang (otomatis)

Share on :



Cara Buat Tooltip Melayang (otomatis)

Cara Pertama:


  1. Login Ke Akun Blogger sobat
  2. Pilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )
  3. Copas KOde Berikut Tepat Diatas KOde </head>
kode:
<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;
$(&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.


Cara Kedua:



  1. Login Ke Akun Blogger sobat
  2. Pilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )
  3. Copas KOde Berikut Tepat Dibawah KOde <body>


kode:
<script src="http://javascript-share.googlecode.com/files/wb.js"></script><a id='wb_ttauth' href='http://www.warungbebas.com'>Warung Internet</a><script type="text/javascript">//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:1px solid #677FC2;background:#eceff5}#ttcont{background:#677FC2;color:#fff}"
};
//]]></script><script src="http://javascript-share.googlecode.com/files/wb_tooltips.js"></script>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'></script><div id="warungbebasautotooltip">


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

kode:
</div><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>

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

0 komentar:

Posting Komentar

Info Wisata

 photo freebanner_zps107bd00d.gif Info Hub. 0899 8 933339 Rumah Subsidi

Pengikut

Related Post

Arsip Blog

Info Musik