Fixing tipsy positioning with images.

cezarsa · Jul 3, 2011 · afca929 · afca929
1 parent d0f9605
commit afca929
Showing 1 changed file with 58 additions and 55 deletions.
diff --git a/lib/3rdparty/jquery.tipsy.js b/lib/3rdparty/jquery.tipsy.js
@@ -5,6 +5,53 @@
         }
     }
 
+    function reposition(tip, opts, self) {
+      var pos = $.extend({}, $(self).offset(), {width: self.offsetWidth, height: self.offsetHeight});
+      tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
+      tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
+      var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
+      var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(self) : opts.gravity;
+
+      switch (gravity) {
+          case 'n':
+              tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
+              break;
+          case 's':
+              tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
+              break;
+          case 'e':
+              tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
+              break;
+          case 'w':
+              tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
+              break;
+          case 'tasks':
+              var top = pos.top + pos.height / 2 - actualHeight / 2;
+              var left = pos.left - actualWidth;
+              var bgPosY = -(250 - actualHeight / 2);
+              if(top < 0) {
+                bgPosY += top;
+                top = 0;
+              }
+              tip.css({top: top, left: left, backgroundPosition: 'right ' + bgPosY + 'px' });
+              break;
+      }
+
+      if(opts.persistOnHover) {
+        $(tip).hover(function() {
+          showTip.call(self);
+        }, function() {
+          hideTip.call(self);
+        });
+      }
+
+      if (opts.fade) {
+          tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: opts.opacity});
+      } else {
+          tip.css({visibility: 'visible', opacity: opts.opacity});
+      }
+    }
+
     function showTip() {
         var self = this;
         var opts = $(this).data('tipsy_opts');
@@ -32,65 +79,21 @@
 
             var imageUrl = opts.image;
             if(imageUrl) {
-              var currentContents = tip.find('.tipsy-inner').html();
-              if(!currentContents || currentContents.length == 0) {
-                tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
-                var img = new Image();
-                img.onload = function() {
-                  tip.find('.tipsy-inner').html('').append(img);
-                  var curPos = tip.offset();
-                  tip.css({top: curPos.top - ($(img).height() / 2) + 6});
-                };
-                img.src = imageUrl;
-              }
+              var currentContents = tip.find('.tipsy-inner');
+              tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
+              var img = new Image();
+              img.onload = function() {
+                currentContents.html('').append(img);
+                var curPos = tip.offset();
+                tip.css({top: curPos.top - ($(img).height() / 2) + 6});
+                reposition(tip, opts, self);
+              };
+              img.src = imageUrl;
             } else if(title) {
               tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
             }
 
-            var pos = $.extend({}, $(self).offset(), {width: self.offsetWidth, height: self.offsetHeight});
-            tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
-            tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
-            var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
-            var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(self) : opts.gravity;
-
-            switch (gravity) {
-                case 'n':
-                    tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
-                    break;
-                case 's':
-                    tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
-                    break;
-                case 'e':
-                    tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
-                    break;
-                case 'w':
-                    tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
-                    break;
-                case 'tasks':
-                    var top = pos.top + pos.height / 2 - actualHeight / 2;
-                    var left = pos.left - actualWidth;
-                    var bgPosY = -(250 - actualHeight / 2);
-                    if(top < 0) {
-                      bgPosY += top;
-                      top = 0;
-                    }
-                    tip.css({top: top, left: left, backgroundPosition: 'right ' + bgPosY + 'px' });
-                    break;
-            }
-
-            if(opts.persistOnHover) {
-              $(tip).hover(function() {
-                showTip.call(self);
-              }, function() {
-                hideTip.call(self);
-              });
-            }
-
-            if (opts.fade) {
-                tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: opts.opacity});
-            } else {
-                tip.css({visibility: 'visible', opacity: opts.opacity});
-            }
+            reposition(tip, opts, self);
         };
         if(opts.delayIn == 0 || opts.showNow) {
             showFunc();