Simple Tooltips w/ CSS & jQuery

Ada kabar terhangat dari master Soh Tanaka. Kalau master sudah mengeluarkan artikel, simpel, gaya, mudah dan pasti langsung terkenal sob :)) Artikel kali ini berbicara mengenai tooltip!!! Sobat mungkin melihat judul/title pada link² yg ada di blog (postingan) beben si bloglang ganteng kalem ini :-? Yes thats right...like it bro :D Kalau Beben mah masih belibet dalam pemakaiannya juga sob :( Kalau dari Master Soh Tanaka ini sangat mudah sob, hanya dengan menggunakan satu attribute class saja ;;) dan script jQuery plug-innya juga sedikit :x (Mungkin ini yg tersimpel dan multifungsi yg pernah ada)

DEMO

Untuk memulainya sobat harus sudah memiliki script jQuery minimal versi /jquery/1.3.2/jquery.min.js Kalau sudah ada jQuerynya mah gak usah lagi yak :D

Script Plug-In jQuery

Bisa diletakan diatas/sebelum kode </body>

$(document).ready(function() {
$(".tip_trigger").hover(function(){
$(this).find('.tip').show(); //Show tooltip
}, function() {
$(this).find('.tip').hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = $(this).find('.tip').width(); //Find width of tooltip
var tipHeight = $(this).find('.tip').height(); //Find height of tooltip

//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom edge of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);

if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport (Exceeds the right side of viewport)
mousex = e.pageX - tipWidth - 20; //Set new X coordinate
$(this).find('.tip').css({ top: mousey, left: mousex }); //Move tooltip element to the left side
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport (Exceeds the bottom of the viewport)
mousey = e.pageY - tipHeight - 20; //Set new Y coordinate
$(this).find('.tip').css({ top: mousey, left: mousex }); //Move tooltip element on top
} else { //By Default have the tooltip on the bottom right
$(this).find('.tip').css({ top: mousey, left: mousex });
}
});
});

Kode CSS

.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

Syntax HTML

Dalam penulisan sebuah link sobat tinggal menambahkan attribute class="tip_trigger" saja :P
<a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {


	//Tooltips
	$(".tip_trigger").hover(function(){
		$(this).find('.tip').show(); //Show tooltip
	}, function() {
		$(this).find('.tip').hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		  var mousex = e.pageX + 20; //Get X coodrinates
		  var mousey = e.pageY + 20; //Get Y coordinates
		  var tipWidth = $(this).find('.tip').width(); //Find width of tooltip
		  var tipHeight = $(this).find('.tip').height(); //Find height of tooltip
		 
		 //Distance of element from the right edge of viewport
		  var tipVisX = $(window).width() - (mousex + tipWidth); 
		  var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
			$(this).find('.tip').css({  top: mousey, left: mousex });
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
			$(this).find('.tip').css({  top: mousey, left: mousex });
		} else {
			$(this).find('.tip').css({  top: mousey, left: mousex });
		}
	});
	


});
//]]
</script>