From b1f5e530b89942a7f32d353c98e1e0e585a6e278 Mon Sep 17 00:00:00 2001 From: breity Date: Fri, 27 Jul 2012 16:59:47 -0700 Subject: [PATCH 01/11] Updated with fix for tooltip flickering; added hide action on mouse click when keepAlive option is set to true --- README.txt | 18 +++++++++++++++++- jquery.tipTip.js | 27 +++++++++++++++++++++++---- jquery.tipTip.minified.js | 2 +- tipTip.css | 34 +++++++++++++++++++++++----------- 4 files changed, 64 insertions(+), 17 deletions(-) diff --git a/README.txt b/README.txt index 537e4d3..31fe436 100644 --- a/README.txt +++ b/README.txt @@ -2,6 +2,9 @@ TipTip Copyright 2010 Drew Wilson +Modified by: indyone (https://github.com/indyone/TipTip) +Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Jul. 27, 2012 + http://www.drewwilson.com http://code.drewwilson.com/entry/tiptip-jquery-plugin @@ -60,4 +63,17 @@ What's New: * The option "activation" can have the value "manual". In this case no events will be applied to the element and the developer will be responsible to show or not the tooltip. But you can always use the show and hide methods to show or hide the tooltip ;-) -* Created an alternate look & feel for TipTip, you can use it by setting the option "cssClass" to "alternative". \ No newline at end of file +* Created an alternate look & feel for TipTip, you can use it by setting the option "cssClass" to "alternative". + +------------------------------------------------------------------- + +More updates (Jul. 27, 2012): + +* Fixed tooltip flickering that occurred when hovering over the edge of a tooltip's trigger element. +This was being caused by the tiptip_arrow overlapping the trigger element. CSS and arrow positioning +have been modified to resolve this. CSS was inspired by Toorshia's CSS in TipTip discussion thread +(see https://drew.tenderapp.com/discussions/tiptip/32-tool-tip-flickers-when-hovering-the-border-of-a-tiptip-link). + +* When keepAlive option is set to true, tooltip now hides both when the mouse leaves the tiptip_holder (like before) +as well as when mouse is clicked anywhere other than the tooltip itself. (Appropriated from James Simpson's miniTip plugin: +http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin). \ No newline at end of file diff --git a/jquery.tipTip.js b/jquery.tipTip.js index fb75bab..44eef1a 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -3,6 +3,9 @@ * Copyright 2010 Drew Wilson * www.drewwilson.com * code.drewwilson.com/entry/tiptip-jquery-plugin +* +* Modified by: indyone (https://github.com/indyone/TipTip) +* Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Jul. 27, 2012 * * Version 1.3 - Updated: Mar. 23, 2010 * @@ -88,6 +91,14 @@ tiptip_holder.one('mouseleave.tipTip', function () { deactive_tiptip(); }); + + // hide tooltip when user clicks anywhere else but on the tooltip element + $('html').off('click.tipTip').on('click.tipTip',function(e){ + if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { + $('html').off('click.tipTip'); + deactive_tiptip(); + } + }); } }); } else if (opts.activation == 'focus') { @@ -108,6 +119,14 @@ tiptip_holder.one('mouseleave.tipTip', function () { deactive_tiptip(); }); + + // hide tooltip when user clicks anywhere else but on the tooltip element + $('html').off('click.tipTip').on('click.tipTip',function(e){ + if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { + $('html').off('click.tipTip'); + deactive_tiptip(); + } + }); } }); } else if (opts.activation == 'manual') { @@ -206,7 +225,7 @@ function moveBottom() { tip_class = tip_classes.bottom; - tip_top = org_top + org_height + opts.edgeOffset + (arrow_height / 2); + tip_top = org_top + org_height + opts.edgeOffset; tip_left = org_left + ((org_width - tip_width) / 2); } @@ -219,7 +238,7 @@ function moveRight() { tip_class = tip_classes.right; tip_top = org_top + ((org_height - tip_height) / 2); - tip_left = org_left + org_width + opts.edgeOffset + (arrow_width / 2); + tip_left = org_left + org_width + opts.edgeOffset; } // Calculate the position of the tooltip. @@ -286,14 +305,14 @@ arrow_top = tip_height; // Position the arrow vertically on the top of the tooltip. arrow_left = org_left - tip_left + ((org_width - arrow_width) / 2); // Center the arrow horizontally on the center of the target element. } else if (tip_class == tip_classes.bottom) { - arrow_top = -arrow_height; // Position the arrow vertically on the bottom of the tooltip. + arrow_top = 0; // Position the arrow vertically on the bottom of the tooltip. arrow_left = org_left - tip_left + ((org_width - arrow_width) / 2); // Center the arrow horizontally on the center of the target element. } else if (tip_class == tip_classes.left) { arrow_top = org_top - tip_top + ((org_height - arrow_height) / 2); // Center the arrow vertically on the center of the target element. arrow_left = tip_width; // Position the arrow vertically on the left of the tooltip. } else if (tip_class == tip_classes.right) { arrow_top = org_top - tip_top + ((org_height - arrow_height) / 2); // Center the arrow vertically on the center of the target element. - arrow_left = -arrow_width; // Position the arrow vertically on the right of the tooltip. + arrow_left = 0; // Position the arrow vertically on the right of the tooltip. } tiptip_arrow diff --git a/jquery.tipTip.minified.js b/jquery.tipTip.minified.js index e547525..55875c0 100644 --- a/jquery.tipTip.minified.js +++ b/jquery.tipTip.minified.js @@ -1 +1 @@ -(function(d){d.fn.tipTip=function(g){var k={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:0,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},afterEnter:function(){},exit:function(){},afterExit:function(){},cssClass:"",detectTextDir:true};if(d("#tiptip_holder").length<=0){var i=d("
",{id:"tiptip_arrow_inner"}),j=d("
",{id:"tiptip_arrow"}).append(i),h=d("
",{id:"tiptip_content"}),f=d("
",{id:"tiptip_holder"}).append(j).append(h);d("body").append(f)}else{var f=d("#tiptip_holder"),h=d("#tiptip_content"),j=d("#tiptip_arrow")}return this.each(function(){var q=d(this),p=q.data("tipTip"),n=p&&p.options||d.extend({},k,g),m={holder:f,content:h,arrow:j,options:n};if(p){switch(g){case"show":s();break;case"hide":r();break;case"destroy":q.unbind(".tipTip").removeData("tipTip");break;case"position":l()}}else{var o=false;q.data("tipTip",{options:n});if(n.activation=="hover"){q.bind("mouseenter.tipTip",function(){s()}).bind("mouseleave.tipTip",function(){if(!n.keepAlive){r()}else{f.one("mouseleave.tipTip",function(){r()})}})}else{if(n.activation=="focus"){q.bind("focus.tipTip",function(){s()}).bind("blur.tipTip",function(){r()})}else{if(n.activation=="click"){q.bind("click.tipTip",function(t){t.preventDefault();s();return false}).bind("mouseleave.tipTip",function(){if(!n.keepAlive){r()}else{f.one("mouseleave.tipTip",function(){r()})}})}else{if(n.activation=="manual"){}}}}}function s(){if(n.enter.call(q,m)===false){return}var t;if(n.content){t=d.isFunction(n.content)?n.content.call(q,m):n.content}else{t=n.content=q.attr(n.attribute);q.removeAttr(n.attribute)}if(!t){return}h.html(t);f.hide().removeAttr("class").css({"max-width":n.maxWidth});if(n.cssClass){f.addClass(n.cssClass)}l();if(o){clearTimeout(o)}o=setTimeout(function(){f.stop(true,true).fadeIn(n.fadeIn)},n.delay);d(window).bind("resize.tipTip scroll.tipTip",l);q.addClass("tiptip_visible");n.afterEnter.call(q,m)}function r(){if(n.exit.call(q,m)===false){return}if(o){clearTimeout(o)}f.fadeOut(n.fadeOut);d(window).unbind("resize.tipTip scroll.tipTip");q.removeClass("tiptip_visible");n.afterExit.call(q,m)}function l(){var N=q.offset(),u=N.top,G=N.left,Q=q.outerWidth(),v=q.outerHeight(),y,J,L=f.outerWidth(),D=f.outerHeight(),I,P={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},F,K,x=12,R=12,B=d(window),C=B.scrollTop(),E=B.scrollLeft(),O=B.width(),H=B.height(),z=n.detectTextDir&&e(h.text());function M(){I=P.top;y=u-D-n.edgeOffset-(R/2);J=G+((Q-L)/2)}function w(){I=P.bottom;y=u+v+n.edgeOffset+(R/2);J=G+((Q-L)/2)}function t(){I=P.left;y=u+((v-D)/2);J=G-L-n.edgeOffset-(x/2)}function A(){I=P.right;y=u+((v-D)/2);J=G+Q+n.edgeOffset+(x/2)}if(n.defaultPosition=="bottom"){w()}else{if(n.defaultPosition=="top"){M()}else{if(n.defaultPosition=="left"&&!z){t()}else{if(n.defaultPosition=="left"&&z){A()}else{if(n.defaultPosition=="right"&&!z){A()}else{if(n.defaultPosition=="right"&&z){t()}else{w()}}}}}}if(I==P.left&&!z&&JE+O){t()}else{if(I==P.right&&z&&J+L>E+O){t()}else{if(I==P.top&&yC+H){M()}}}}}}if(I==P.left||I==P.right){if(y+D>H+C){y=u+v>H+C?u+v-D:H+C-D}else{if(yO+E){J=G+Q>O+E?G+Q-L:O+E-L}else{if(J",{id:"tiptip_arrow_inner"}),s=e("
",{id:"tiptip_arrow"}).append(r),o=e("
",{id:"tiptip_content"}),u=e("
",{id:"tiptip_holder"}).append(s).append(o);e("body").append(u)}else var u=e("#tiptip_holder"),o=e("#tiptip_content"),s=e("#tiptip_arrow");return this.each(function(){function h(){if(f.enter.call(r,l)===!1)return;var t;f.content?t=e.isFunction(f.content)?f.content.call(r,l):f.content:(t=f.content=r.attr(f.attribute),r.removeAttr(f.attribute));if(!t)return;o.html(t),u.hide().removeAttr("class").css({"max-width":f.maxWidth}),f.cssClass&&u.addClass(f.cssClass),d(),c&&clearTimeout(c),c=setTimeout(function(){u.stop(!0,!0).fadeIn(f.fadeIn)},f.delay),e(window).bind("resize.tipTip scroll.tipTip",d),r.addClass("tiptip_visible"),f.afterEnter.call(r,l)}function p(){if(f.exit.call(r,l)===!1)return;c&&clearTimeout(c),u.fadeOut(f.fadeOut),e(window).unbind("resize.tipTip scroll.tipTip"),r.removeClass("tiptip_visible"),f.afterExit.call(r,l)}function d(){function L(){m=g.top,h=n-v-f.edgeOffset-E/2,p=a+(l-d)/2}function A(){m=g.bottom,h=n+c+f.edgeOffset,p=a+(l-d)/2}function O(){m=g.left,h=n+(c-v)/2,p=a-d-f.edgeOffset-w/2}function M(){m=g.right,h=n+(c-v)/2,p=a+l+f.edgeOffset}var t=r.offset(),n=t.top,a=t.left,l=r.outerWidth(),c=r.outerHeight(),h,p,d=u.outerWidth(),v=u.outerHeight(),m,g={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},y,b,w=12,E=12,S=e(window),x=S.scrollTop(),T=S.scrollLeft(),N=S.width(),C=S.height(),k=f.detectTextDir&&i(o.text());f.defaultPosition=="bottom"?A():f.defaultPosition=="top"?L():f.defaultPosition=="left"&&!k?O():f.defaultPosition=="left"&&k?M():f.defaultPosition=="right"&&!k?M():f.defaultPosition=="right"&&k?O():A(),m==g.left&&!k&&pT+N?O():m==g.right&&k&&p+d>T+N?O():m==g.top&&hx+C&&L();if(m==g.left||m==g.right)h+v>C+x?h=n+c>C+x?n+c-v:C+x-v:hN+T?p=a+l>N+T?a+l-d:N+T-d:p Date: Mon, 24 Sep 2012 11:11:38 +0200 Subject: [PATCH 02/11] Prevent quick hover when move mouse... --- jquery.tipTip.js | 123 ++++++++++++++++++++------------------ jquery.tipTip.minified.js | 2 +- 2 files changed, 67 insertions(+), 58 deletions(-) diff --git a/jquery.tipTip.js b/jquery.tipTip.js index 44eef1a..e6deabb 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -1,26 +1,26 @@ /* -* TipTip -* Copyright 2010 Drew Wilson -* www.drewwilson.com -* code.drewwilson.com/entry/tiptip-jquery-plugin -* -* Modified by: indyone (https://github.com/indyone/TipTip) -* Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Jul. 27, 2012 -* -* Version 1.3 - Updated: Mar. 23, 2010 -* -* 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 -* or to the right depending on what is necessary to stay within the -* browser window. It is completely customizable as well via CSS. -* -* This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses: -* http://www.opensource.org/licenses/mit-license.php -* http://www.gnu.org/licenses/gpl.html -*/ + * TipTip + * Copyright 2010 Drew Wilson + * www.drewwilson.com + * code.drewwilson.com/entry/tiptip-jquery-plugin + * + * Modified by: indyone (https://github.com/indyone/TipTip) + * Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Jul. 27, 2012 + * + * Version 1.3 - Updated: Mar. 23, 2010 + * + * 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 + * or to the right depending on what is necessary to stay within the + * browser window. It is completely customizable as well via CSS. + * + * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + */ (function ($) { $.fn.tipTip = function (options) { @@ -31,6 +31,7 @@ edgeOffset: 0, // The offset between the tooltip arrow edge and the element that has the tooltip. defaultPosition: 'bottom', // The position of the tooltip. Can be: top, right, bottom and left. delay: 400, // The delay in msec to show a tooltip. + delayHover: 500, //The delay in msec to prevent quick hover fadeIn: 200, // The length in msec of the fade in. fadeOut: 200, // The length in msec of the fade out. attribute: 'title', // The attribute to fetch the tooltip text if the option content is false. @@ -78,57 +79,65 @@ } } else { var timeout = false; - + var timeoutHover = false; org_elem.data('tipTip', { options: opts }); if (opts.activation == 'hover') { org_elem.bind('mouseenter.tipTip', function () { - active_tiptip(); + if (opts.delayHover){ + timeoutHover = setTimeout( function(){ active_tiptip() }, opts.delayHover); + }else{ + active_tiptip(); + } }).bind('mouseleave.tipTip', function () { - if (!opts.keepAlive) { - deactive_tiptip(); - } else { - tiptip_holder.one('mouseleave.tipTip', function () { + if (timeoutHover){ + clearTimeout(timeoutHover); + return; + } + if (!opts.keepAlive) { deactive_tiptip(); - }); - - // hide tooltip when user clicks anywhere else but on the tooltip element - $('html').off('click.tipTip').on('click.tipTip',function(e){ - if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { - $('html').off('click.tipTip'); - deactive_tiptip(); - } - }); - } - }); + } else { + tiptip_holder.one('mouseleave.tipTip', function () { + deactive_tiptip(); + }); + + // hide tooltip when user clicks anywhere else but on the tooltip element + $('html').off('click.tipTip').on('click.tipTip',function(e){ + if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { + $('html').off('click.tipTip'); + deactive_tiptip(); + } + }); + } + }); } else if (opts.activation == 'focus') { org_elem.bind('focus.tipTip', function () { active_tiptip(); }).bind('blur.tipTip', function () { - deactive_tiptip(); - }); + deactive_tiptip(); + }); } else if (opts.activation == 'click') { org_elem.bind('click.tipTip', function (e) { e.preventDefault(); active_tiptip(); return false; }).bind('mouseleave.tipTip', function () { - if (!opts.keepAlive) { - deactive_tiptip(); - } else { - tiptip_holder.one('mouseleave.tipTip', function () { + if (!opts.keepAlive) { deactive_tiptip(); - }); - - // hide tooltip when user clicks anywhere else but on the tooltip element - $('html').off('click.tipTip').on('click.tipTip',function(e){ - if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { - $('html').off('click.tipTip'); - deactive_tiptip(); - } - }); - } - }); + } else { + tiptip_holder.one('mouseleave.tipTip', function () { + deactive_tiptip(); + }); + + // hide tooltip when user clicks anywhere else but on the tooltip element + $('html').off('click.tipTip').on('click.tipTip',function(e){ + if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { + $('html').off('click.tipTip'); + deactive_tiptip(); + } + }); + } + }); } else if (opts.activation == 'manual') { // Nothing to register actually. We decide when to show or hide. } @@ -312,7 +321,7 @@ arrow_left = tip_width; // Position the arrow vertically on the left of the tooltip. } else if (tip_class == tip_classes.right) { arrow_top = org_top - tip_top + ((org_height - arrow_height) / 2); // Center the arrow vertically on the center of the target element. - arrow_left = 0; // Position the arrow vertically on the right of the tooltip. + arrow_left = 0; // Position the arrow vertically on the right of the tooltip. } tiptip_arrow diff --git a/jquery.tipTip.minified.js b/jquery.tipTip.minified.js index 55875c0..66c3bf1 100644 --- a/jquery.tipTip.minified.js +++ b/jquery.tipTip.minified.js @@ -1 +1 @@ -(function(e){function i(e){return r.test(e)}e.fn.tipTip=function(t){var n={activation:"hover",keepAlive:!1,maxWidth:"200px",edgeOffset:0,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:!1,enter:function(){},afterEnter:function(){},exit:function(){},afterExit:function(){},cssClass:"",detectTextDir:!0};if(e("#tiptip_holder").length<=0){var r=e("
",{id:"tiptip_arrow_inner"}),s=e("
",{id:"tiptip_arrow"}).append(r),o=e("
",{id:"tiptip_content"}),u=e("
",{id:"tiptip_holder"}).append(s).append(o);e("body").append(u)}else var u=e("#tiptip_holder"),o=e("#tiptip_content"),s=e("#tiptip_arrow");return this.each(function(){function h(){if(f.enter.call(r,l)===!1)return;var t;f.content?t=e.isFunction(f.content)?f.content.call(r,l):f.content:(t=f.content=r.attr(f.attribute),r.removeAttr(f.attribute));if(!t)return;o.html(t),u.hide().removeAttr("class").css({"max-width":f.maxWidth}),f.cssClass&&u.addClass(f.cssClass),d(),c&&clearTimeout(c),c=setTimeout(function(){u.stop(!0,!0).fadeIn(f.fadeIn)},f.delay),e(window).bind("resize.tipTip scroll.tipTip",d),r.addClass("tiptip_visible"),f.afterEnter.call(r,l)}function p(){if(f.exit.call(r,l)===!1)return;c&&clearTimeout(c),u.fadeOut(f.fadeOut),e(window).unbind("resize.tipTip scroll.tipTip"),r.removeClass("tiptip_visible"),f.afterExit.call(r,l)}function d(){function L(){m=g.top,h=n-v-f.edgeOffset-E/2,p=a+(l-d)/2}function A(){m=g.bottom,h=n+c+f.edgeOffset,p=a+(l-d)/2}function O(){m=g.left,h=n+(c-v)/2,p=a-d-f.edgeOffset-w/2}function M(){m=g.right,h=n+(c-v)/2,p=a+l+f.edgeOffset}var t=r.offset(),n=t.top,a=t.left,l=r.outerWidth(),c=r.outerHeight(),h,p,d=u.outerWidth(),v=u.outerHeight(),m,g={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},y,b,w=12,E=12,S=e(window),x=S.scrollTop(),T=S.scrollLeft(),N=S.width(),C=S.height(),k=f.detectTextDir&&i(o.text());f.defaultPosition=="bottom"?A():f.defaultPosition=="top"?L():f.defaultPosition=="left"&&!k?O():f.defaultPosition=="left"&&k?M():f.defaultPosition=="right"&&!k?M():f.defaultPosition=="right"&&k?O():A(),m==g.left&&!k&&pT+N?O():m==g.right&&k&&p+d>T+N?O():m==g.top&&hx+C&&L();if(m==g.left||m==g.right)h+v>C+x?h=n+c>C+x?n+c-v:C+x-v:hN+T?p=a+l>N+T?a+l-d:N+T-d:p",{id:"tiptip_arrow_inner"}),f=a("
",{id:"tiptip_arrow"}).append(d),g=a("
",{id:"tiptip_content"}),h=a("
",{id:"tiptip_holder"}).append(f).append(g);a("body").append(h)}else{var h=a("#tiptip_holder"),g=a("#tiptip_content"),f=a("#tiptip_arrow")}return this.each(function(){function n(){if(j.enter.call(d,k)===false){return}var b;if(j.content){b=a.isFunction(j.content)?j.content.call(d,k):j.content}else{b=j.content=d.attr(j.attribute);d.removeAttr(j.attribute)}if(!b){return}g.html(b);h.hide().removeAttr("class").css({"max-width":j.maxWidth});if(j.cssClass){h.addClass(j.cssClass)}p();if(l){clearTimeout(l)}l=setTimeout(function(){h.stop(true,true).fadeIn(j.fadeIn)},j.delay);a(window).bind("resize.tipTip scroll.tipTip",p);d.addClass("tiptip_visible");j.afterEnter.call(d,k)}function o(){if(j.exit.call(d,k)===false){return}if(l){clearTimeout(l)}h.fadeOut(j.fadeOut);a(window).unbind("resize.tipTip scroll.tipTip");d.removeClass("tiptip_visible");j.afterExit.call(d,k)}function p(){function C(){q=r.top;m=c-p-j.edgeOffset-v/2;n=i+(k-o)/2}function D(){q=r.bottom;m=c+l+j.edgeOffset;n=i+(k-o)/2}function E(){q=r.left;m=c+(l-p)/2;n=i-o-j.edgeOffset-u/2}function F(){q=r.right;m=c+(l-p)/2;n=i+k+j.edgeOffset}var b=d.offset(),c=b.top,i=b.left,k=d.outerWidth(),l=d.outerHeight(),m,n,o=h.outerWidth(),p=h.outerHeight(),q,r={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},s,t,u=12,v=12,w=a(window),x=w.scrollTop(),y=w.scrollLeft(),z=w.width(),A=w.height(),B=j.detectTextDir&&e(g.text());if(j.defaultPosition=="bottom"){D()}else if(j.defaultPosition=="top"){C()}else if(j.defaultPosition=="left"&&!B){E()}else if(j.defaultPosition=="left"&&B){F()}else if(j.defaultPosition=="right"&&!B){F()}else if(j.defaultPosition=="right"&&B){E()}else{D()}if(q==r.left&&!B&&ny+z){E()}else if(q==r.right&&B&&n+o>y+z){E()}else if(q==r.top&&mx+A){C()}if(q==r.left||q==r.right){if(m+p>A+x){m=c+l>A+x?c+l-p:A+x-p}else if(mz+y){n=i+k>z+y?i+k-o:z+y-o}else if(n Date: Mon, 24 Sep 2012 19:53:46 +0300 Subject: [PATCH 03/11] Update jquery.tipTip.js --- jquery.tipTip.js | 1 - 1 file changed, 1 deletion(-) diff --git a/jquery.tipTip.js b/jquery.tipTip.js index e6deabb..ce77b99 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -92,7 +92,6 @@ }).bind('mouseleave.tipTip', function () { if (timeoutHover){ clearTimeout(timeoutHover); - return; } if (!opts.keepAlive) { deactive_tiptip(); From 523890d33f4e9eb45bf93779a539c3185409542b Mon Sep 17 00:00:00 2001 From: Vincent Barrier Date: Mon, 24 Sep 2012 19:54:20 +0300 Subject: [PATCH 04/11] Update jquery.tipTip.minified.js --- jquery.tipTip.minified.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.tipTip.minified.js b/jquery.tipTip.minified.js index 66c3bf1..1f7d71f 100644 --- a/jquery.tipTip.minified.js +++ b/jquery.tipTip.minified.js @@ -1 +1 @@ -(function(a){function e(a){return d.test(a)}a.fn.tipTip=function(b){var c={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:0,defaultPosition:"bottom",delay:400,delayHover:500,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},afterEnter:function(){},exit:function(){},afterExit:function(){},cssClass:"",detectTextDir:true};if(a("#tiptip_holder").length<=0){var d=a("
",{id:"tiptip_arrow_inner"}),f=a("
",{id:"tiptip_arrow"}).append(d),g=a("
",{id:"tiptip_content"}),h=a("
",{id:"tiptip_holder"}).append(f).append(g);a("body").append(h)}else{var h=a("#tiptip_holder"),g=a("#tiptip_content"),f=a("#tiptip_arrow")}return this.each(function(){function n(){if(j.enter.call(d,k)===false){return}var b;if(j.content){b=a.isFunction(j.content)?j.content.call(d,k):j.content}else{b=j.content=d.attr(j.attribute);d.removeAttr(j.attribute)}if(!b){return}g.html(b);h.hide().removeAttr("class").css({"max-width":j.maxWidth});if(j.cssClass){h.addClass(j.cssClass)}p();if(l){clearTimeout(l)}l=setTimeout(function(){h.stop(true,true).fadeIn(j.fadeIn)},j.delay);a(window).bind("resize.tipTip scroll.tipTip",p);d.addClass("tiptip_visible");j.afterEnter.call(d,k)}function o(){if(j.exit.call(d,k)===false){return}if(l){clearTimeout(l)}h.fadeOut(j.fadeOut);a(window).unbind("resize.tipTip scroll.tipTip");d.removeClass("tiptip_visible");j.afterExit.call(d,k)}function p(){function C(){q=r.top;m=c-p-j.edgeOffset-v/2;n=i+(k-o)/2}function D(){q=r.bottom;m=c+l+j.edgeOffset;n=i+(k-o)/2}function E(){q=r.left;m=c+(l-p)/2;n=i-o-j.edgeOffset-u/2}function F(){q=r.right;m=c+(l-p)/2;n=i+k+j.edgeOffset}var b=d.offset(),c=b.top,i=b.left,k=d.outerWidth(),l=d.outerHeight(),m,n,o=h.outerWidth(),p=h.outerHeight(),q,r={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},s,t,u=12,v=12,w=a(window),x=w.scrollTop(),y=w.scrollLeft(),z=w.width(),A=w.height(),B=j.detectTextDir&&e(g.text());if(j.defaultPosition=="bottom"){D()}else if(j.defaultPosition=="top"){C()}else if(j.defaultPosition=="left"&&!B){E()}else if(j.defaultPosition=="left"&&B){F()}else if(j.defaultPosition=="right"&&!B){F()}else if(j.defaultPosition=="right"&&B){E()}else{D()}if(q==r.left&&!B&&ny+z){E()}else if(q==r.right&&B&&n+o>y+z){E()}else if(q==r.top&&mx+A){C()}if(q==r.left||q==r.right){if(m+p>A+x){m=c+l>A+x?c+l-p:A+x-p}else if(mz+y){n=i+k>z+y?i+k-o:z+y-o}else if(n",{id:"tiptip_arrow_inner"}),f=a("
",{id:"tiptip_arrow"}).append(d),g=a("
",{id:"tiptip_content"}),h=a("
",{id:"tiptip_holder"}).append(f).append(g);a("body").append(h)}else{var h=a("#tiptip_holder"),g=a("#tiptip_content"),f=a("#tiptip_arrow")}return this.each(function(){function n(){if(j.enter.call(d,k)===false){return}var b;if(j.content){b=a.isFunction(j.content)?j.content.call(d,k):j.content}else{b=j.content=d.attr(j.attribute);d.removeAttr(j.attribute)}if(!b){return}g.html(b);h.hide().removeAttr("class").css({"max-width":j.maxWidth});if(j.cssClass){h.addClass(j.cssClass)}p();if(l){clearTimeout(l)}l=setTimeout(function(){h.stop(true,true).fadeIn(j.fadeIn)},j.delay);a(window).bind("resize.tipTip scroll.tipTip",p);d.addClass("tiptip_visible");j.afterEnter.call(d,k)}function o(){if(j.exit.call(d,k)===false){return}if(l){clearTimeout(l)}h.fadeOut(j.fadeOut);a(window).unbind("resize.tipTip scroll.tipTip");d.removeClass("tiptip_visible");j.afterExit.call(d,k)}function p(){function C(){q=r.top;m=c-p-j.edgeOffset-v/2;n=i+(k-o)/2}function D(){q=r.bottom;m=c+l+j.edgeOffset;n=i+(k-o)/2}function E(){q=r.left;m=c+(l-p)/2;n=i-o-j.edgeOffset-u/2}function F(){q=r.right;m=c+(l-p)/2;n=i+k+j.edgeOffset}var b=d.offset(),c=b.top,i=b.left,k=d.outerWidth(),l=d.outerHeight(),m,n,o=h.outerWidth(),p=h.outerHeight(),q,r={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},s,t,u=12,v=12,w=a(window),x=w.scrollTop(),y=w.scrollLeft(),z=w.width(),A=w.height(),B=j.detectTextDir&&e(g.text());if(j.defaultPosition=="bottom"){D()}else if(j.defaultPosition=="top"){C()}else if(j.defaultPosition=="left"&&!B){E()}else if(j.defaultPosition=="left"&&B){F()}else if(j.defaultPosition=="right"&&!B){F()}else if(j.defaultPosition=="right"&&B){E()}else{D()}if(q==r.left&&!B&&ny+z){E()}else if(q==r.right&&B&&n+o>y+z){E()}else if(q==r.top&&mx+A){C()}if(q==r.left||q==r.right){if(m+p>A+x){m=c+l>A+x?c+l-p:A+x-p}else if(mz+y){n=i+k>z+y?i+k-o:z+y-o}else if(n Date: Wed, 10 Oct 2012 16:31:03 -0700 Subject: [PATCH 05/11] Fixed an error where tooltip positioning and size wouldn't calculate correctly in certain cases; Added offset (4px) from window edge when tooltip is positioned at edge of viewport --- README.txt | 2 +- jquery.tipTip.js | 15 +++++++++------ jquery.tipTip.minified.js | 17 ++++++++++++++++- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/README.txt b/README.txt index 31fe436..399f172 100644 --- a/README.txt +++ b/README.txt @@ -3,7 +3,7 @@ TipTip Copyright 2010 Drew Wilson Modified by: indyone (https://github.com/indyone/TipTip) -Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Jul. 27, 2012 +Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Oct. 10, 2012 http://www.drewwilson.com http://code.drewwilson.com/entry/tiptip-jquery-plugin diff --git a/jquery.tipTip.js b/jquery.tipTip.js index ce77b99..9915071 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -5,7 +5,7 @@ * code.drewwilson.com/entry/tiptip-jquery-plugin * * Modified by: indyone (https://github.com/indyone/TipTip) - * Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Jul. 27, 2012 + * Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Oct. 10, 2012 * * Version 1.3 - Updated: Mar. 23, 2010 * @@ -193,7 +193,10 @@ clearTimeout(timeout); } - tiptip_holder.fadeOut(opts.fadeOut); + tiptip_holder.fadeOut(opts.fadeOut, function(){ + // reset tip position and dimensions + $(this).css({ left: '', top: '', height: '', width: '' }); + }); $(window).unbind('resize.tipTip scroll.tipTip'); @@ -284,18 +287,18 @@ // Fix the vertical position if the tooltip is off the top or bottom sides of the window's viewport. if (tip_class == tip_classes.left || tip_class == tip_classes.right) { // If positioned left or right check if the tooltip is off the top or bottom window's viewport. if (tip_top + tip_height > win_height + win_top) { // If the bottom edge of the tooltip is off the bottom side of the window's viewport. - tip_top = org_top + org_height > win_height + win_top ? org_top + org_height - tip_height : win_height + win_top - tip_height; // Make 'bottom edge of the tooltip' == 'bottom side of the window's viewport'. + tip_top = org_top + org_height > win_height + win_top ? org_top + org_height - tip_height : win_height + win_top - tip_height - 4; // Make 'bottom edge of the tooltip' == 'bottom side of the window's viewport'. } else if (tip_top < win_top) { // If the top edge of the tooltip if off the top side of the window's viewport. - tip_top = org_top < win_top ? org_top : win_top; // Make 'top edge of the tooltip' == 'top side of the window's viewport'. + tip_top = org_top < win_top ? org_top : win_top + 4; // Make 'top edge of the tooltip' == 'top side of the window's viewport'. } } // Fix the horizontal position if the tooltip is off the right or left sides of the window's viewport. if (tip_class == tip_classes.top || tip_class == tip_classes.bottom) { if (tip_left + tip_width > win_width + win_left) { // If the right edge of the tooltip is off the right side of the window's viewport. - tip_left = org_left + org_width > win_width + win_left ? org_left + org_width - tip_width : win_width + win_left - tip_width; // Make 'right edge of the tooltip' == 'right side of the window's viewport'. + tip_left = org_left + org_width > win_width + win_left ? org_left + org_width - tip_width : win_width + win_left - tip_width - 4; // Make 'right edge of the tooltip' == 'right side of the window's viewport'. } else if (tip_left < win_left) { // If the left edge of the tooltip if off the left side of the window's viewport. - tip_left = org_left < win_left ? org_left : win_left; // Make 'left edge of the tooltip' == 'left side of the window's viewport'. + tip_left = org_left < win_left ? org_left : win_left + 4; // Make 'left edge of the tooltip' == 'left side of the window's viewport'. } } diff --git a/jquery.tipTip.minified.js b/jquery.tipTip.minified.js index 1f7d71f..54821ce 100644 --- a/jquery.tipTip.minified.js +++ b/jquery.tipTip.minified.js @@ -1 +1,16 @@ -(function(a){function e(a){return d.test(a)}a.fn.tipTip=function(b){var c={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:0,defaultPosition:"bottom",delay:400,delayHover:500,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},afterEnter:function(){},exit:function(){},afterExit:function(){},cssClass:"",detectTextDir:true};if(a("#tiptip_holder").length<=0){var d=a("
",{id:"tiptip_arrow_inner"}),f=a("
",{id:"tiptip_arrow"}).append(d),g=a("
",{id:"tiptip_content"}),h=a("
",{id:"tiptip_holder"}).append(f).append(g);a("body").append(h)}else{var h=a("#tiptip_holder"),g=a("#tiptip_content"),f=a("#tiptip_arrow")}return this.each(function(){function n(){if(j.enter.call(d,k)===false){return}var b;if(j.content){b=a.isFunction(j.content)?j.content.call(d,k):j.content}else{b=j.content=d.attr(j.attribute);d.removeAttr(j.attribute)}if(!b){return}g.html(b);h.hide().removeAttr("class").css({"max-width":j.maxWidth});if(j.cssClass){h.addClass(j.cssClass)}p();if(l){clearTimeout(l)}l=setTimeout(function(){h.stop(true,true).fadeIn(j.fadeIn)},j.delay);a(window).bind("resize.tipTip scroll.tipTip",p);d.addClass("tiptip_visible");j.afterEnter.call(d,k)}function o(){if(j.exit.call(d,k)===false){return}if(l){clearTimeout(l)}h.fadeOut(j.fadeOut);a(window).unbind("resize.tipTip scroll.tipTip");d.removeClass("tiptip_visible");j.afterExit.call(d,k)}function p(){function C(){q=r.top;m=c-p-j.edgeOffset-v/2;n=i+(k-o)/2}function D(){q=r.bottom;m=c+l+j.edgeOffset;n=i+(k-o)/2}function E(){q=r.left;m=c+(l-p)/2;n=i-o-j.edgeOffset-u/2}function F(){q=r.right;m=c+(l-p)/2;n=i+k+j.edgeOffset}var b=d.offset(),c=b.top,i=b.left,k=d.outerWidth(),l=d.outerHeight(),m,n,o=h.outerWidth(),p=h.outerHeight(),q,r={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},s,t,u=12,v=12,w=a(window),x=w.scrollTop(),y=w.scrollLeft(),z=w.width(),A=w.height(),B=j.detectTextDir&&e(g.text());if(j.defaultPosition=="bottom"){D()}else if(j.defaultPosition=="top"){C()}else if(j.defaultPosition=="left"&&!B){E()}else if(j.defaultPosition=="left"&&B){F()}else if(j.defaultPosition=="right"&&!B){F()}else if(j.defaultPosition=="right"&&B){E()}else{D()}if(q==r.left&&!B&&ny+z){E()}else if(q==r.right&&B&&n+o>y+z){E()}else if(q==r.top&&mx+A){C()}if(q==r.left||q==r.right){if(m+p>A+x){m=c+l>A+x?c+l-p:A+x-p}else if(mz+y){n=i+k>z+y?i+k-o:z+y-o}else if(n",{id:"tiptip_arrow_inner"}),s=e("
",{id:"tiptip_arrow"}).append(r),o=e("
",{id:"tiptip_content"}),u=e("
",{id:"tiptip_holder"}).append(s).append(o);e("body").append(u)}else var u=e("#tiptip_holder"),o=e("#tiptip_content"),s=e("#tiptip_arrow");return this.each(function(){function p(){if(f.enter.call(r,l)===!1)return;var t;f.content?t=e.isFunction(f.content)?f.content.call(r,l):f.content:(t=f.content=r.attr(f.attribute),r.removeAttr(f.attribute));if(!t)return;o.html(t),u.hide().removeAttr("class").css({"max-width":f.maxWidth}),f.cssClass&&u.addClass(f.cssClass),v(),c&&clearTimeout(c),c=setTimeout(function(){u.stop(!0,!0).fadeIn(f.fadeIn)},f.delay),e(window).bind("resize.tipTip scroll.tipTip",v),r.addClass("tiptip_visible"),f.afterEnter.call(r,l)}function d(){if(f.exit.call(r,l)===!1)return;c&&clearTimeout(c),u.fadeOut(f.fadeOut,function(){e(this).css({left:"",top:"",height:"",width:""})}),e(window).unbind("resize.tipTip scroll.tipTip"),r.removeClass("tiptip_visible"),f.afterExit.call(r,l)}function v(){function L(){m=g.top,h=n-v-f.edgeOffset-E/2,p=a+(l-d)/2}function A(){m=g.bottom,h=n+c+f.edgeOffset,p=a+(l-d)/2}function O(){m=g.left,h=n+(c-v)/2,p=a-d-f.edgeOffset-w/2}function M(){m=g.right,h=n+(c-v)/2,p=a+l+f.edgeOffset}var t=r.offset(),n=t.top,a=t.left,l=r.outerWidth(),c=r.outerHeight(),h,p,d=u.outerWidth(),v=u.outerHeight(),m,g={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},y,b,w=12,E=12,S=e(window),x=S.scrollTop(),T=S.scrollLeft(),N=S.width(),C=S.height(),k=f.detectTextDir&&i(o.text());f.defaultPosition=="bottom"?A():f.defaultPosition=="top"?L():f.defaultPosition=="left"&&!k?O():f.defaultPosition=="left"&&k?M():f.defaultPosition=="right"&&!k?M():f.defaultPosition=="right"&&k?O():A(),m==g.left&&!k&&pT+N?O():m==g.right&&k&&p+d>T+N?O():m==g.top&&hx+C&&L();if(m==g.left||m==g.right)h+v>C+x?h=n+c>C+x?n+c-v:C+x-v-4:hN+T?p=a+l>N+T?a+l-d:N+T-d-4:p Date: Mon, 18 Mar 2013 16:03:22 -0700 Subject: [PATCH 06/11] fixing typos --- jquery.tipTip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.tipTip.js b/jquery.tipTip.js index 9915071..81bc4ea 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -26,7 +26,7 @@ $.fn.tipTip = function (options) { var defaults = { activation: 'hover', // How to show (and hide) the tooltip. Can be: hover, focus, click and manual. - keepAlive: false, // When true the tooltip won't disapper when the mouse moves away from the element. Instead it will be hidden when it leaves the tooltip. + keepAlive: false, // When true the tooltip won't disappear when the mouse moves away from the element. Instead it will be hidden when it leaves the tooltip. maxWidth: '200px', // The max-width to set on the tooltip. You may also use the option cssClass to set this. edgeOffset: 0, // The offset between the tooltip arrow edge and the element that has the tooltip. defaultPosition: 'bottom', // The position of the tooltip. Can be: top, right, bottom and left. @@ -35,7 +35,7 @@ fadeIn: 200, // The length in msec of the fade in. fadeOut: 200, // The length in msec of the fade out. attribute: 'title', // The attribute to fetch the tooltip text if the option content is false. - content: false, // HTML or String or Function (that returns HTML or String) to fill TipTIp with + content: false, // HTML or String or Function (that returns HTML or String) to fill TipTip with enter: function () { }, // Callback function before a tooltip is shown. afterEnter: function () { }, // Callback function after a tooltip is shown. exit: function () { }, // Callback function before a tooltip is hidden. From fc27ad190f0bf7d294db03e8d75ed5a1dd2d9631 Mon Sep 17 00:00:00 2001 From: Alan Hussey Date: Mon, 18 Mar 2013 16:25:20 -0700 Subject: [PATCH 07/11] added a new option, hideOnClick, which extracts the hide-on-click functionality previously added to keepAlive --- jquery.tipTip.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/jquery.tipTip.js b/jquery.tipTip.js index 81bc4ea..8dbb4de 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -32,6 +32,7 @@ defaultPosition: 'bottom', // The position of the tooltip. Can be: top, right, bottom and left. delay: 400, // The delay in msec to show a tooltip. delayHover: 500, //The delay in msec to prevent quick hover + hideOnClick: false, // When true, clicking outside of the tooltip will hide it immediately. Works well with keepAlive fadeIn: 200, // The length in msec of the fade in. fadeOut: 200, // The length in msec of the fade out. attribute: 'title', // The attribute to fetch the tooltip text if the option content is false. @@ -93,20 +94,16 @@ if (timeoutHover){ clearTimeout(timeoutHover); } + if (!opts.keepAlive) { deactive_tiptip(); } else { tiptip_holder.one('mouseleave.tipTip', function () { deactive_tiptip(); }); - - // hide tooltip when user clicks anywhere else but on the tooltip element - $('html').off('click.tipTip').on('click.tipTip',function(e){ - if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { - $('html').off('click.tipTip'); - deactive_tiptip(); - } - }); + } + if (opts.hideOnClick) { + deactive_on_click(); } }); } else if (opts.activation == 'focus') { @@ -127,19 +124,22 @@ tiptip_holder.one('mouseleave.tipTip', function () { deactive_tiptip(); }); - - // hide tooltip when user clicks anywhere else but on the tooltip element - $('html').off('click.tipTip').on('click.tipTip',function(e){ - if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { - $('html').off('click.tipTip'); - deactive_tiptip(); - } - }); } + deactive_on_click(); }); } else if (opts.activation == 'manual') { // Nothing to register actually. We decide when to show or hide. } + + // hide tooltip when user clicks anywhere else but on the tooltip element + function deactive_on_click() { + $('html').off('click.tipTip').on('click.tipTip',function(e){ + if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { + $('html').off('click.tipTip'); + deactive_tiptip(); + } + }); + } } function active_tiptip() { From 91124c582c9f8649d2914c8efcab7537574ea375 Mon Sep 17 00:00:00 2001 From: Alan Hussey Date: Mon, 18 Mar 2013 16:31:17 -0700 Subject: [PATCH 08/11] adding option delayHide, the number of msec to wait before hiding the tooltip. Plays nice with hideOnClick --- jquery.tipTip.js | 60 ++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 50 insertions(+), 10 deletions(-) diff --git a/jquery.tipTip.js b/jquery.tipTip.js index 8dbb4de..0f9c4cd 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -32,7 +32,8 @@ defaultPosition: 'bottom', // The position of the tooltip. Can be: top, right, bottom and left. delay: 400, // The delay in msec to show a tooltip. delayHover: 500, //The delay in msec to prevent quick hover - hideOnClick: false, // When true, clicking outside of the tooltip will hide it immediately. Works well with keepAlive + delayHide: 0, // The delay in msec to hide a tooltip. + hideOnClick: false, // When true, clicking outside of the tooltip will hide it immediately. Works well with keepAlive and delayHide fadeIn: 200, // The length in msec of the fade in. fadeOut: 200, // The length in msec of the fade out. attribute: 'title', // The attribute to fetch the tooltip text if the option content is false. @@ -58,6 +59,9 @@ tiptip_arrow = $('#tiptip_arrow'); } + // shared timeout to track delayed hide, because we only have one #tiptip_holder + var timeoutHide = false; + return this.each(function () { var org_elem = $(this), data = org_elem.data('tipTip'), @@ -136,7 +140,7 @@ $('html').off('click.tipTip').on('click.tipTip',function(e){ if (tiptip_holder.css('display') == 'block' && !$(e.target).closest('#tiptip_holder').length) { $('html').off('click.tipTip'); - deactive_tiptip(); + deactive_tiptip(0); // 0 = immediately, overriding delayHide } }); } @@ -173,6 +177,11 @@ clearTimeout(timeout); } + // Kill delayed timeout + if (timeoutHide) { + clearTimeout(timeoutHide); + } + timeout = setTimeout(function () { tiptip_holder.stop(true, true).fadeIn(opts.fadeIn); }, opts.delay); @@ -184,7 +193,7 @@ opts.afterEnter.call(org_elem, callback_data); } - function deactive_tiptip() { + function deactive_tiptip(delay) { if (opts.exit.call(org_elem, callback_data) === false) { return; } @@ -193,16 +202,47 @@ clearTimeout(timeout); } - tiptip_holder.fadeOut(opts.fadeOut, function(){ - // reset tip position and dimensions - $(this).css({ left: '', top: '', height: '', width: '' }); - }); + function hide_tiptip() { + tiptip_holder.fadeOut(opts.fadeOut, function(){ + // reset tip position and dimensions + $(this).css({ left: '', top: '', height: '', width: '' }); + }); + } + + // Visually hide the tooltip after an optional delay + var delay = (delay !== undefined) ? delay : opts.delayHide; + + if (delay == 0) { + hide_tiptip(); + // if user clicked, let's also cancel any delayed hide + if (opts.delayHide > 0) { + clearTimeout(timeoutHide); + } + } else { + + // don't hide tooltip when we hover it + tiptip_holder.one('mouseenter.tipTip', function() { + clearTimeout(timeoutHide); + tiptip_holder.on('mouseleave.tipTip', function() { + deactive_tiptip(); + }); + }); + + timeoutHide = setTimeout(function() { + hide_tiptip(); + }, delay); + + } + + // These should happen whether the tooltip is visually hidden or just moved by active_tiptip() + setTimeout(function() { + $(window).unbind('resize.tipTip scroll.tipTip'); - $(window).unbind('resize.tipTip scroll.tipTip'); + org_elem.removeClass('tiptip_visible'); - org_elem.removeClass('tiptip_visible'); + opts.afterExit.call(org_elem, callback_data); + }, delay); - opts.afterExit.call(org_elem, callback_data); } function position_tiptip() { From ad63ad8a153a3dd41b00080e6047cd40fa32e05f Mon Sep 17 00:00:00 2001 From: Alan Hussey Date: Mon, 18 Mar 2013 16:44:47 -0700 Subject: [PATCH 09/11] Updated README.txt with some documentation on recent changes --- README.txt | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/README.txt b/README.txt index 399f172..75623b5 100644 --- a/README.txt +++ b/README.txt @@ -4,6 +4,7 @@ Copyright 2010 Drew Wilson Modified by: indyone (https://github.com/indyone/TipTip) Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Oct. 10, 2012 +Modified by: Alan Hussey/EnergySavvy (https://github.com/EnergySavvy/TipTip) - Updated: Mar. 18, 2012 http://www.drewwilson.com http://code.drewwilson.com/entry/tiptip-jquery-plugin @@ -76,4 +77,14 @@ have been modified to resolve this. CSS was inspired by Toorshia's CSS in TipTi * When keepAlive option is set to true, tooltip now hides both when the mouse leaves the tiptip_holder (like before) as well as when mouse is clicked anywhere other than the tooltip itself. (Appropriated from James Simpson's miniTip plugin: -http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin). \ No newline at end of file +http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin). + +------------------------------------------------------------------- + +More updates (Mar. 18, 2013): + +* Added two new options, hideOnClick and delayHide: + +* hideOnClick takes a feature previously added to keepAlive, and makes it optional. + +* delayHide adds an optional delay before the tooltip will be hidden. This option pairs well with hideOnClick. \ No newline at end of file From cc7c95955b728113ebff03cf53687686eebd9d69 Mon Sep 17 00:00:00 2001 From: Alan Hussey Date: Tue, 19 Mar 2013 10:11:37 -0700 Subject: [PATCH 10/11] prevent the browser from displaying the native tooltip on first hover --- jquery.tipTip.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/jquery.tipTip.js b/jquery.tipTip.js index 0f9c4cd..0590249 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -68,6 +68,12 @@ opts = data && data.options || $.extend({}, defaults, options), callback_data = { holder: tiptip_holder, content: tiptip_content, arrow: tiptip_arrow, options: opts }; + // caching and removing the opts.attribute, to prevent browser from showing native tooltip + if (!opts.content && !$.isFunction(opts.content)) { + opts.content = org_elem.attr(opts.attribute); + org_elem.removeAttr(opts.attribute); //remove original attribute + } + if (data) { switch (options) { case 'show': From 09d682b5e3e35affce18dce2354f45e2ab6f4827 Mon Sep 17 00:00:00 2001 From: breity Date: Tue, 19 Mar 2013 11:19:53 -0700 Subject: [PATCH 11/11] Updated minified js file, readme info --- README.txt | 2 +- jquery.tipTip.js | 1 + jquery.tipTip.minified.js | 3 ++- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/README.txt b/README.txt index 75623b5..bf733c5 100644 --- a/README.txt +++ b/README.txt @@ -4,7 +4,7 @@ Copyright 2010 Drew Wilson Modified by: indyone (https://github.com/indyone/TipTip) Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Oct. 10, 2012 -Modified by: Alan Hussey/EnergySavvy (https://github.com/EnergySavvy/TipTip) - Updated: Mar. 18, 2012 +Modified by: Alan Hussey/EnergySavvy (https://github.com/EnergySavvy/TipTip) - Updated: Mar. 18, 2013 http://www.drewwilson.com http://code.drewwilson.com/entry/tiptip-jquery-plugin diff --git a/jquery.tipTip.js b/jquery.tipTip.js index 0590249..a822d29 100644 --- a/jquery.tipTip.js +++ b/jquery.tipTip.js @@ -6,6 +6,7 @@ * * Modified by: indyone (https://github.com/indyone/TipTip) * Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Oct. 10, 2012 + * Modified by: Alan Hussey/EnergySavvy (https://github.com/EnergySavvy/TipTip) - Updated: Mar. 18, 2013 * * Version 1.3 - Updated: Mar. 23, 2010 * diff --git a/jquery.tipTip.minified.js b/jquery.tipTip.minified.js index 54821ce..57636c1 100644 --- a/jquery.tipTip.minified.js +++ b/jquery.tipTip.minified.js @@ -6,6 +6,7 @@ * * Modified by: indyone (https://github.com/indyone/TipTip) * Modified by: Jonathan Lim-Breitbart (https://github.com/breity/TipTip) - Updated: Oct. 10, 2012 + * Modified by: Alan Hussey/EnergySavvy (https://github.com/EnergySavvy/TipTip) - Updated: Mar. 18, 2013 * * Version 1.3 - Updated: Mar. 23, 2010 * @@ -13,4 +14,4 @@ * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ -(function(e){function i(e){return r.test(e)}e.fn.tipTip=function(t){var n={activation:"hover",keepAlive:!1,maxWidth:"200px",edgeOffset:0,defaultPosition:"bottom",delay:400,delayHover:500,fadeIn:200,fadeOut:200,attribute:"title",content:!1,enter:function(){},afterEnter:function(){},exit:function(){},afterExit:function(){},cssClass:"",detectTextDir:!0};if(e("#tiptip_holder").length<=0){var r=e("
",{id:"tiptip_arrow_inner"}),s=e("
",{id:"tiptip_arrow"}).append(r),o=e("
",{id:"tiptip_content"}),u=e("
",{id:"tiptip_holder"}).append(s).append(o);e("body").append(u)}else var u=e("#tiptip_holder"),o=e("#tiptip_content"),s=e("#tiptip_arrow");return this.each(function(){function p(){if(f.enter.call(r,l)===!1)return;var t;f.content?t=e.isFunction(f.content)?f.content.call(r,l):f.content:(t=f.content=r.attr(f.attribute),r.removeAttr(f.attribute));if(!t)return;o.html(t),u.hide().removeAttr("class").css({"max-width":f.maxWidth}),f.cssClass&&u.addClass(f.cssClass),v(),c&&clearTimeout(c),c=setTimeout(function(){u.stop(!0,!0).fadeIn(f.fadeIn)},f.delay),e(window).bind("resize.tipTip scroll.tipTip",v),r.addClass("tiptip_visible"),f.afterEnter.call(r,l)}function d(){if(f.exit.call(r,l)===!1)return;c&&clearTimeout(c),u.fadeOut(f.fadeOut,function(){e(this).css({left:"",top:"",height:"",width:""})}),e(window).unbind("resize.tipTip scroll.tipTip"),r.removeClass("tiptip_visible"),f.afterExit.call(r,l)}function v(){function L(){m=g.top,h=n-v-f.edgeOffset-E/2,p=a+(l-d)/2}function A(){m=g.bottom,h=n+c+f.edgeOffset,p=a+(l-d)/2}function O(){m=g.left,h=n+(c-v)/2,p=a-d-f.edgeOffset-w/2}function M(){m=g.right,h=n+(c-v)/2,p=a+l+f.edgeOffset}var t=r.offset(),n=t.top,a=t.left,l=r.outerWidth(),c=r.outerHeight(),h,p,d=u.outerWidth(),v=u.outerHeight(),m,g={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},y,b,w=12,E=12,S=e(window),x=S.scrollTop(),T=S.scrollLeft(),N=S.width(),C=S.height(),k=f.detectTextDir&&i(o.text());f.defaultPosition=="bottom"?A():f.defaultPosition=="top"?L():f.defaultPosition=="left"&&!k?O():f.defaultPosition=="left"&&k?M():f.defaultPosition=="right"&&!k?M():f.defaultPosition=="right"&&k?O():A(),m==g.left&&!k&&pT+N?O():m==g.right&&k&&p+d>T+N?O():m==g.top&&hx+C&&L();if(m==g.left||m==g.right)h+v>C+x?h=n+c>C+x?n+c-v:C+x-v-4:hN+T?p=a+l>N+T?a+l-d:N+T-d-4:p=a("#tiptip_holder").length){var d=a("
",{id:"tiptip_arrow_inner"}),f=a("
",{id:"tiptip_arrow"}).append(d),g=a("
",{id:"tiptip_content"}),h=a("
",{id:"tiptip_holder"}).append(f).append(g);a("body").append(h)}else var h=a("#tiptip_holder"),g=a("#tiptip_content"),f=a("#tiptip_arrow");var i=!1;return this.each(function(){function o(){a("html").off("click.tipTip").on("click.tipTip",function(b){"block"!=h.css("display")||a(b.target).closest("#tiptip_holder").length||(a("html").off("click.tipTip"),q(0))})}function p(){if(k.enter.call(d,l)!==!1){var b;k.content?b=a.isFunction(k.content)?k.content.call(d,l):k.content:(b=k.content=d.attr(k.attribute),d.removeAttr(k.attribute)),b&&(g.html(b),h.hide().removeAttr("class").css({"max-width":k.maxWidth}),k.cssClass&&h.addClass(k.cssClass),r(),m&&clearTimeout(m),i&&clearTimeout(i),m=setTimeout(function(){h.stop(!0,!0).fadeIn(k.fadeIn)},k.delay),a(window).bind("resize.tipTip scroll.tipTip",r),d.addClass("tiptip_visible"),k.afterEnter.call(d,l))}}function q(b){function c(){h.fadeOut(k.fadeOut,function(){a(this).css({left:"",top:"",height:"",width:""})})}if(k.exit.call(d,l)!==!1){m&&clearTimeout(m);var b=void 0!==b?b:k.delayHide;0==b?(c(),k.delayHide>0&&clearTimeout(i)):(h.one("mouseenter.tipTip",function(){clearTimeout(i),h.on("mouseleave.tipTip",function(){q()})}),i=setTimeout(function(){c()},b)),setTimeout(function(){a(window).unbind("resize.tipTip scroll.tipTip"),d.removeClass("tiptip_visible"),k.afterExit.call(d,l)},b)}}function r(){function C(){q=r.top,m=c-p-k.edgeOffset-v/2,n=i+(j-o)/2}function D(){q=r.bottom,m=c+l+k.edgeOffset,n=i+(j-o)/2}function E(){q=r.left,m=c+(l-p)/2,n=i-o-k.edgeOffset-u/2}function F(){q=r.right,m=c+(l-p)/2,n=i+j+k.edgeOffset}var m,n,q,s,t,b=d.offset(),c=b.top,i=b.left,j=d.outerWidth(),l=d.outerHeight(),o=h.outerWidth(),p=h.outerHeight(),r={top:"tip_top",bottom:"tip_bottom",left:"tip_left",right:"tip_right"},u=12,v=12,w=a(window),x=w.scrollTop(),y=w.scrollLeft(),z=w.width(),A=w.height(),B=k.detectTextDir&&e(g.text());"bottom"==k.defaultPosition?D():"top"==k.defaultPosition?C():"left"!=k.defaultPosition||B?"left"==k.defaultPosition&&B?F():"right"!=k.defaultPosition||B?"right"==k.defaultPosition&&B?E():D():F():E(),q==r.left&&!B&&y>n?F():q==r.left&&B&&y>n-o?F():q==r.right&&!B&&n>y+z?E():q==r.right&&B&&n+o>y+z?E():q==r.top&&x>m?D():q==r.bottom&&m>x+A&&C(),(q==r.left||q==r.right)&&(m+p>A+x?m=c+l>A+x?c+l-p:A+x-p-4:x>m&&(m=x>c?c:x+4)),(q==r.top||q==r.bottom)&&(n+o>z+y?n=i+j>z+y?i+j-o:z+y-o-4:y>n&&(n=y>i?i:y+4)),h.css({left:Math.round(n),top:Math.round(m)}).removeClass(r.top).removeClass(r.bottom).removeClass(r.left).removeClass(r.right).addClass(q),q==r.top?(s=p,t=i-n+(j-u)/2):q==r.bottom?(s=0,t=i-n+(j-u)/2):q==r.left?(s=c-m+(l-v)/2,t=o):q==r.right&&(s=c-m+(l-v)/2,t=0),f.css({left:Math.round(t),top:Math.round(s)})}var d=a(this),j=d.data("tipTip"),k=j&&j.options||a.extend({},c,b),l={holder:h,content:g,arrow:f,options:k};if(k.content||a.isFunction(k.content)||(k.content=d.attr(k.attribute),d.removeAttr(k.attribute)),j)switch(b){case"show":p();break;case"hide":q();break;case"destroy":d.unbind(".tipTip").removeData("tipTip");break;case"position":r()}else{var m=!1,n=!1;d.data("tipTip",{options:k}),"hover"==k.activation?d.bind("mouseenter.tipTip",function(){k.delayHover?n=setTimeout(function(){p()},k.delayHover):p()}).bind("mouseleave.tipTip",function(){n&&clearTimeout(n),k.keepAlive?h.one("mouseleave.tipTip",function(){q()}):q(),k.hideOnClick&&o()}):"focus"==k.activation?d.bind("focus.tipTip",function(){p()}).bind("blur.tipTip",function(){q()}):"click"==k.activation?d.bind("click.tipTip",function(a){return a.preventDefault(),p(),!1}).bind("mouseleave.tipTip",function(){k.keepAlive?h.one("mouseleave.tipTip",function(){q()}):q(),o()}):"manual"==k.activation}})};var b="A-Za-z\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u02b8\u0300-\u0590\u0800-\u1fff\u2c00-\ufb1c\ufdfe-\ufe6f\ufefd-\uffff",c="\u0591-\u07ff\ufb1d-\ufdfd\ufe70-\ufefc",d=RegExp("^[^"+b+"]*["+c+"]")})(jQuery); \ No newline at end of file