Tooltip Otomatis disetiap Link Berattribut Title

tooltip otomatis, link berattribut title, tooltip, attribut title, tooltip blogspot, Tooltip Otomatis disetiap Link Berattribut Title

Alhamdulillah. Bismillah. Enricumiz - Tooltip Otomatis disetiap Link Berattribut Title. Hayo udah pada tahukan? Ini dia caranya masang tooltip otomatis di setiap link berattribut title :). Enak bukan, tidak usah memasang class ataupun plugin. Tinggal pasang di template dan pasang attribut title disetiap link, dijamin berhasil :) #sory masih minimalist :D

Tutorial :

• Masuk ke Editor template anda masing-masing.
• Cari kode </head> , copas kode di bawah ini, paste di atas </head>

<script type='text/javascript'><!--tooltip-->
this.tooltip = function(){
xOffset = 20;
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><!--tooltip ends-->

NB : offsetnya bisa diganti sesuka anda.

• Kemudian pasang kode CSS nya :

/* tooltip */
#tooltip {
  width:auto;
  text-transform:capitalize;
  z-index:9999;
  position:absolute;
  background:#E9E7ED;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  -khtml-border-radius:2px;
  border-radius:2px;
  -o-transition:0.5s ease-out;
  -moz-transition:0.5s ease-out;
  -webkit-transition:0.5s ease-out;
  padding:3px;
  font-family:arial,"Helvetica LT Std",sans-serif;
  font-size:12px;
  color:#000;
  border:1px solid #B0BECF;
  display:none;
  font-weight:bold;
}

Edit CSS-nya sesuka hati kalian.

• Kalau tidak bisa atau berhasil, mungkin belum di pasang pemanggil jQuery. Pasang jquey pemanggil di atas </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

• Simpan.

Oke, Semoga bermanfaat tutorial hari ini. Kalau berkenan, Like fanspage blog ini donk, diatas postingannya. Thanks be4 . Alhamdulillah.