// !REMEMBER TO INCLUDE JQUERY IN YOUR PAGE - IF YOU DON'T KNOW HOW, JUST INCLUDE THE LINE OF CODE BELOW IN THE ... PART OF YOUR PAGE /* */ //----------------------------------------------CONFIGURATION var offsetX=345; //Distance between tooltip and cursor var offsetY=345; var fadeInSpeed=600; //Speed of the Fade-IN effect in miliseconds var fadeOutSpeed=200; //Speed of the Fade-OUT effect in miliseconds var clearQueue = true; //If set to false, if you hover over many elements fast, the events will stack up var gotoEnd= true; //If set to false, if you hover over many elements fast, the events will stack up //---------------------------------------------GLOBAL VARIABLES var mouseX,mouseY; $(document).ready(function(){ //-----------------------------------------------MOUSE EVENTS $(document).mousemove(function(e){ mouseX=e.pageX-offsetX; mouseY=e.pageY-offsetY; $('.floating1').css('top',mouseY); $('.floating1').css('left',mouseX); }); //------------------------------------------------HOVER EVENTS $('.hastooltip').hover(function () { var selector ="#"+ $(this).attr('tooltip'); //alert(selector); //$(selector).stop(clearQueue , gotoEnd) $(selector).fadeIn(250,function () {}); },function () { var selector ="#"+ $(this).attr('tooltip'); $(selector).fadeOut(fadeOutSpeed,function () {}); } ); });