Sticky Toolip with jQuery

Tooltip yang keberadaannya selalu menyertai sebuah syntax link dimana jika kita memberikan attribute title didalamnya maka akan muncul. Secara default browsingan memang sudah ada fasilitas ini. Silahkan sobat cari link yang diberi title, lalu tunjuk dengan kursor maka akan terlihat si judul itu :D
Datang dari OnWebDev dimana pemiliknya selalu update terus mengenai jQuery, CSS, Javascript, dan lain-lainnya. Beben si bloglang anu ganteng kalem tea ini akan berbagi bagaimana membuat sticky tooltip dengan bantuan jQuery script. Beben memilih yang ini karena terlihat simpel dan tentunya gaya punya sob.

Jika sobat mau melihat & membaca artikel sebelumnya mengenai tooltip diblog ini ada juga loh:

1. Simple Tooltips w/ CSS & jQuery By: Sohtanaka.
2. Simple Pretty Tooltip.
3. Easy jQuery Tooltip Plugin.

Itulah beberapa info mengenai tooltip keren punya. Mari kita lanjut ke versi @gabromanato

Kode CSS

#tooltip-wrapper {
position: absolute;
width: auto;
height: auto;
background: #333;
padding: 5px 10px;
text-align: center;
display: none;
font-weight: bold;
color: #fff;
border: 1px solid #FF0000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: 5px 5px 5px #888888;
-moz-box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 5px 5px 5px #888888;
}

Letakan diatas kode ]]></b:skin>

jQuery Script

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var tooltipWrapper = '<div id="tooltip-wrapper"><div id="tooltip-inner"></div></div>';
$('body').append(tooltipWrapper);

var tooltipTitle;
var tooltipInner = $('#tooltip-inner');

$('a.tooltip').hover(function() {
if ($(this).attr('title')) {
tooltipTitle = $(this).attr('title');
$(this).attr('title', '');

}

tooltipInner.html(tooltipTitle);
$('#tooltip-wrapper').show();

}, function() {

$('#tooltip-wrapper').hide();
tooltipInner.html('');
if (tooltipTitle) {

$(this).attr('title', tooltipTitle);

}
}).mousemove(function(e) {

var x = e.pageX;
var y = e.pageY;
var tx = $('#tooltip-wrapper').outerWidth();
var ty = $('#tooltip-wrapper').outerHeight();

var bodyX = $('body').outerWidth();
var bodyY = $('body').outerHeight();

$('#tooltip-wrapper').css({
top: y + ty > bodyY ? y - ty : y,
left: x + tx > bodyX ? x - tx - 10 : x + 15
});

});
});
//]]>
</script>

Letakan diatas tag </body>

Save

Demo

demo
Setiap sobat membuat sebuah syntax link tinggal menambahkan atribut class="tooltip"<a href="http://embah-google.blogspot.com/" target="_blank" title="Embah Goolge" class="tooltip">Embah Goolge</a>Silahkan mau yang mana, tinggal pilih saja :) See you...:-h
Happy tooltip \m/