Selasa, 05 Oktober 2010

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>

Tidak ada komentar:

Posting Komentar