jquery.tooltip.js 2.8 KB

1234567891011121314
  1. (function($){$.fn.tooltip=function(options){var defaults={cssClass:"",delay:0,duration:500,xOffset:15,yOffset:15,opacity:0,fadeDuration:400,eventshow:'mouseover',eventhide:'mouseleave',ajaxSource:'href',closebutton:'no',fixed:false};var options=$.extend(defaults,options);return this.each(function(index){var $this=$(this);$tooltip=$("#divTooltip");$tooltipC=$("#divTooltipC");$tooltipT=$("#divTooltipT");$tooltip.hide();if($tooltip.length==0){$tooltip=$('<div id="divTooltip"><div id="divTooltipT"></div><div id="divTooltipC"></div></div>');$('body').append($tooltip);$tooltip.hide();}
  2. function show(e){e=e?e:window.event;if(options.closebutton=='yes'){$tooltipT.html("<div id='close'>Sluiten</div>");}
  3. clearTimeout($tooltip.data("hideTimeoutId"));$tooltip.removeClass($tooltip.attr("class"));$tooltip.css("width","");$tooltip.css("height","");$tooltip.addClass(options.cssClass);$tooltip.css("opacity",1-options.opacity/100);$tooltip.css("position","absolute");$tooltip.data("title",$this.attr("title"));$this.attr("title","");$tooltip.data("alt",$this.attr("alt"));$this.attr("alt","");$tooltipC.html($tooltip.data("title"));var el=$this.attr(options.ajaxSource);if(el!=undefined&&el!=""&&el!="#")
  4. $tooltipC.html($.ajax({url:$this.attr(options.ajaxSource),async:false}).responseText);if(options.fixed===false){winw=$(window).width();w=$tooltip.width();xOffset=options.xOffset;if(w+xOffset+50<winw-e.clientX)
  5. $tooltip.css("left",$(document).scrollLeft()+ e.clientX+xOffset);else if(w+xOffset+50<e.clientX)
  6. $tooltip.css("left",$(document).scrollLeft()+ e.clientX-(w+xOffset));else{if(e.clientX>winw/2){$tooltip.width(e.clientX-50);$tooltip.css("left",$(document).scrollLeft()+ 25);}
  7. else{$tooltip.width((winw-e.clientX)-50);$tooltip.css("left",$(document).scrollLeft()+ e.clientX+xOffset);}}
  8. winh=$(window).height();h=$tooltip.height();yOffset=options.yOffset;if(h+yOffset+ 50<e.clientY)
  9. $tooltip.css("top",$(document).scrollTop()+ e.clientY-(h+yOffset));else if(h+yOffset+ 50<winh-e.clientY)
  10. $tooltip.css("top",$(document).scrollTop()+ e.clientY+yOffset);else
  11. $tooltip.css("top",$(document).scrollTop()+ 10);}
  12. $tooltip.data("showTimeoutId",setTimeout("$tooltip.fadeIn("+options.fadeDuration+")",options.delay));}
  13. $this.bind(options.eventshow,function(event){show(event);});$tooltip.bind('mouseover',function(event){$this.stop();clearTimeout($tooltip.data("hideTimeoutId"));});$tooltip.bind('mouseleave',function(event){hide(event);});function hide(e){e=e?e:window.event;$this.attr("title",$tooltip.data("title"));$this.attr("alt",$tooltip.data("alt"));clearTimeout($tooltip.data("showTimeoutId"));$tooltip.data("hideTimeoutId",setTimeout("$tooltip.fadeOut("+options.fadeDuration+")",options.duration));}
  14. $this.bind(options.eventhide,function(event){hide(event);});$this.click(function(e){e.preventDefault();});$tooltipT.click(function(event){hide(event);});});}})(jQuery);