diff --git a/README.txt b/README.txt index 3036d3d..740d11a 100644 --- a/README.txt +++ b/README.txt @@ -1,5 +1,10 @@ TipTip +******* +small modification to work with jQuery 1.6.4 +(works also with jQuery 1.7b1) +******* + Copyright 2010 Drew Wilson http://www.drewwilson.com @@ -11,7 +16,7 @@ This Plug-In will create a custom tooltip to replace the default browser tooltip. It is extremely lightweight and very smart in that it detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the -tooltip will adjust itself to be displayed above, below, to the left +tooltip will adjust itself to be displayed above, below, to the left or to the right depending on what is necessary to stay within the browser window. It is completely customizable as well via CSS. diff --git a/jquery.tipTip.js b/jquery.tipTip.js index 7eacf35..a05315d 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -1,4 +1,4 @@ - /* +/*! * TipTip * Copyright 2010 Drew Wilson * www.drewwilson.com @@ -10,7 +10,7 @@ * browser tooltip. It is extremely lightweight and very smart in * that it detects the edges of the browser window and will make sure * the tooltip stays within the current window size. As a result the - * tooltip will adjust itself to be displayed above, below, to the left + * tooltip will adjust itself to be displayed above, below, to the left * or to the right depending on what is necessary to stay within the * browser window. It is completely customizable as well via CSS. * @@ -21,7 +21,7 @@ (function($){ $.fn.tipTip = function(options) { - var defaults = { + var defaults = { activation: "hover", keepAlive: false, maxWidth: "200px", @@ -36,7 +36,7 @@ exit: function(){} }; var opts = $.extend(defaults, options); - + // Setup tip tip elements and render them to the DOM if($("#tiptip_holder").length <= 0){ var tiptip_holder = $('
'); @@ -48,7 +48,7 @@ var tiptip_content = $("#tiptip_content"); var tiptip_arrow = $("#tiptip_arrow"); } - + return this.each(function(){ var org_elem = $(this); if(opts.content){ @@ -56,12 +56,12 @@ } else { var org_title = org_elem.attr(opts.attribute); } - if(org_title != ""){ + if(org_title && org_title != ""){ if(!opts.content){ org_elem.removeAttr(opts.attribute); //remove original Attribute } var timeout = false; - + if(opts.activation == "hover"){ org_elem.hover(function(){ active_tiptip(); @@ -96,13 +96,13 @@ }); } } - + function active_tiptip(){ opts.enter.call(this); tiptip_content.html(org_title); tiptip_holder.hide().removeAttr("class").css("margin","0"); tiptip_arrow.removeAttr("style"); - + var top = parseInt(org_elem.offset()['top']); var left = parseInt(org_elem.offset()['left']); var org_width = parseInt(org_elem.outerWidth()); @@ -119,17 +119,17 @@ if(opts.defaultPosition == "bottom"){ t_class = "_bottom"; - } else if(opts.defaultPosition == "top"){ + } else if(opts.defaultPosition == "top"){ t_class = "_top"; } else if(opts.defaultPosition == "left"){ t_class = "_left"; } else if(opts.defaultPosition == "right"){ t_class = "_right"; } - + var right_compare = (w_compare + left) < parseInt($(window).scrollLeft()); var left_compare = (tip_w + left) > parseInt($(window).width()); - + if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){ t_class = "_right"; arrow_top = Math.round(tip_h - 13) / 2; @@ -146,7 +146,7 @@ var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop()); var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0; - + if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){ if(t_class == "_top" || t_class == "_bottom"){ t_class = "_top"; @@ -161,31 +161,31 @@ } else { t_class = t_class+"_bottom"; } - arrow_top = -12; + arrow_top = -12; marg_top = Math.round(top + org_height + opts.edgeOffset); } - + if(t_class == "_right_top" || t_class == "_left_top"){ marg_top = marg_top + 5; - } else if(t_class == "_right_bottom" || t_class == "_left_bottom"){ + } else if(t_class == "_right_bottom" || t_class == "_left_bottom"){ marg_top = marg_top - 5; } - if(t_class == "_left_top" || t_class == "_left_bottom"){ + if(t_class == "_left_top" || t_class == "_left_bottom"){ marg_left = marg_left + 5; } tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"}); tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class); - + if (timeout){ clearTimeout(timeout); } - timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay); + timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay); } - + function deactive_tiptip(){ opts.exit.call(this); if (timeout){ clearTimeout(timeout); } tiptip_holder.fadeOut(opts.fadeOut); } - } + } }); } -})(jQuery); \ No newline at end of file +})(jQuery); \ No newline at end of file diff --git a/jquery.tipTip.minified.js b/jquery.tipTip.minified.js index cdf3a89..61c130d 100644 --- a/jquery.tipTip.minified.js +++ b/jquery.tipTip.minified.js @@ -1,4 +1,4 @@ - /* +/*! * TipTip * Copyright 2010 Drew Wilson * www.drewwilson.com @@ -10,7 +10,7 @@ * browser tooltip. It is extremely lightweight and very smart in * that it detects the edges of the browser window and will make sure * the tooltip stays within the current window size. As a result the - * tooltip will adjust itself to be displayed above, below, to the left + * tooltip will adjust itself to be displayed above, below, to the left * or to the right depending on what is necessary to stay within the * browser window. It is completely customizable as well via CSS. * @@ -18,4 +18,4 @@ * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ -(function($){$.fn.tipTip=function(options){var defaults={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:3,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},exit:function(){}};var opts=$.extend(defaults,options);if($("#tiptip_holder").length<=0){var tiptip_holder=$('');var tiptip_content=$('');var tiptip_arrow=$('');$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('')))}else{var tiptip_holder=$("#tiptip_holder");var tiptip_content=$("#tiptip_content");var tiptip_arrow=$("#tiptip_arrow")}return this.each(function(){var org_elem=$(this);if(opts.content){var org_title=opts.content}else{var org_title=org_elem.attr(opts.attribute)}if(org_title!=""){if(!opts.content){org_elem.removeAttr(opts.attribute)}var timeout=false;if(opts.activation=="hover"){org_elem.hover(function(){active_tiptip()},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}else if(opts.activation=="focus"){org_elem.focus(function(){active_tiptip()}).blur(function(){deactive_tiptip()})}else if(opts.activation=="click"){org_elem.click(function(){active_tiptip();return false}).hover(function(){},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}function active_tiptip(){opts.enter.call(this);tiptip_content.html(org_title);tiptip_holder.hide().removeAttr("class").css("margin","0");tiptip_arrow.removeAttr("style");var top=parseInt(org_elem.offset()['top']);var left=parseInt(org_elem.offset()['left']);var org_width=parseInt(org_elem.outerWidth());var org_height=parseInt(org_elem.outerHeight());var tip_w=tiptip_holder.outerWidth();var tip_h=tiptip_holder.outerHeight();var w_compare=Math.round((org_width-tip_w)/2);var h_compare=Math.round((org_height-tip_h)/2);var marg_left=Math.round(left+w_compare);var marg_top=Math.round(top+org_height+opts.edgeOffset);var t_class="";var arrow_top="";var arrow_left=Math.round(tip_w-12)/2;if(opts.defaultPosition=="bottom"){t_class="_bottom"}else if(opts.defaultPosition=="top"){t_class="_top"}else if(opts.defaultPosition=="left"){t_class="_left"}else if(opts.defaultPosition=="right"){t_class="_right"}var right_compare=(w_compare+left)