Fix redraw() issues when body has complex flows

Instead of just applying a fluidClass, append the tooltips to a container outside the normal document flow, and float them as before using the old fluidClass. This prevents problems with width/height calculation when the document has complex flows with min/max-width and inline-block elements.
qTip2 · Sep 2, 2012 · 544aee7 · 544aee7
1 parent 53090ef
commit 544aee7
Show file tree

Hide file tree

Showing 12 changed files with 177 additions and 202 deletions.
diff --git a/dist/basic/jquery.qtip.css b/dist/basic/jquery.qtip.css
@@ -2,6 +2,23 @@
 * http://craigsworks.com/projects/qtip2/
 * Copyright (c) 2012 Craig Michael Thompson; Licensed MIT, GPL */
 
+/* Fluid class for determining actual width in IE */
+#qtip-rcontainer{
+	position: absolute;
+	left: -28000px;
+	top: -28000px;
+	display: block;
+	visibility: hidden;
+}
+
+	/* Fluid class for determining actual width in IE */
+	#qtip-rcontainer .ui-tooltip{
+		display: block !important;
+		visibility: hidden !important;
+		position: static !important;
+		float: left !important;
+	}
+
 /* Core qTip styles */
 .ui-tooltip, .qtip{
 	position: absolute;
@@ -19,14 +36,6 @@
 	border-style: solid;
 }
 
-	/* Fluid class for determining actual width in IE */
-	.ui-tooltip-fluid{
-		display: block;
-		visibility: hidden;
-		position: static !important;
-		float: left !important;
-	}
-
 	.ui-tooltip-content{
 		position: relative;
 		padding: 5px 9px;

diff --git a/dist/basic/jquery.qtip.js b/dist/basic/jquery.qtip.js
@@ -47,31 +47,17 @@
 		defaultClass = uitooltip + '-default',
 		focusClass = uitooltip + '-focus',
 		hoverClass = uitooltip + '-hover',
-		fluidClass = uitooltip + '-fluid',
-		hideOffset = '-31000px',
 		replaceSuffix = '_replacedByqTip',
 		oldtitle = 'oldtitle',
-		trackingBound;
-
-	/* Thanks to Paul Irish for this one: http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/ */
-	function log() {
-		log.history = log.history || [];
-		log.history.push(arguments);
-
-		// Make sure console is present
-		if('object' === typeof console) {
+		trackingBound,
+		redrawContainer;
 
-			// Setup console and arguments
-			var c = console[ console.warn ? 'warn' : 'log' ],
-			args = Array.prototype.slice.call(arguments), a;
+	/*
+	* redraw() container for width/height calculations
+	*/
+	redrawContainer = $('<div/>', { id: 'qtip-rcontainer' });
+	$(function() { redrawContainer.appendTo(document.body); });
 
-			// Add qTip2 marker to first argument if it's a string
-			if(typeof arguments[0] === 'string') { args[0] = 'qTip2: ' + args[0]; }
-
-			// Apply console.warn or .log if not supported
-			a = c.apply ? c.apply(console, args) : c(args);
-		}
-	}
 
 
 // Option object sanitizer
@@ -1290,25 +1276,25 @@ function QTip(target, options, id, attr)
 		{
 			if(self.rendered < 1 || isDrawing) { return self; }
 
-			var container = options.position.container,
+			var style = options.style,
+				container = options.position.container,
 				perc, width, max, min;
 
 			// Set drawing flag
 			isDrawing = 1;
 
-			// If tooltip has a set height, just set it... like a boss!
-			if(options.style.height) { tooltip.css(HEIGHT, options.style.height); }
-
-			// If tooltip has a set width, just set it... like a boss!
-			if(options.style.width) { tooltip.css(WIDTH, options.style.width); }
+			// If tooltip has a set height/width, just set it... like a boss!
+			if(style.height) { tooltip.css(HEIGHT, style.height); }
+			if(style.width) { tooltip.css(WIDTH, style.width); }
 
-			// Otherwise simualte max/min width...
+			// Simulate max/min width if not set width present...
 			else {
 				// Reset width and add fluid class
-				tooltip.css(WIDTH, '').addClass(fluidClass);
+				tooltip.css(WIDTH, '').appendTo(redrawContainer);
 
-				// Grab our tooltip width (add 1 so we don't get wrapping problems.. huzzah!)
-				width = tooltip.width() + 1;
+				// Grab our tooltip width (add 1 if odd so we don't get wrapping problems.. huzzah!)
+				width = tooltip.width();
+				if(width % 2) { width += 1; }
 
 				// Grab our max/min properties
 				max = tooltip.css('max-width') || '';
@@ -1323,7 +1309,7 @@ function QTip(target, options, id, attr)
 				width = max + min ? Math.min(Math.max(width, min), max) : width;
 
 				// Set the newly calculated width and remvoe fluid class
-				tooltip.css(WIDTH, Math.round(width)).removeClass(fluidClass);
+				tooltip.css(WIDTH, Math.round(width)).appendTo(container);
 			}
 
 			// Set drawing flag
@@ -1422,8 +1408,7 @@ function init(id, opts)
 	html5 = elem.data(opts.metadata.name || 'qtipopts');
 
 	// If we don't get an object returned attempt to parse it manualyl without parseJSON
-	try { html5 = typeof html5 === 'string' ? $.parseJSON(html5) : html5; }
-	catch(e) { log('Unable to parse HTML5 attribute data: ' + html5); }
+	try { html5 = typeof html5 === 'string' ? $.parseJSON(html5) : html5; } catch(e) {}
 
 	// Merge in and sanitize metadata
 	config = $.extend(TRUE, {}, QTIP.defaults, opts,
@@ -1442,10 +1427,7 @@ function init(id, opts)
 		if(config.content.attr !== FALSE && attr) { config.content.text = attr; }
 
 		// No valid content was found, abort render
-		else {
-			log('Unable to locate content for tooltip! Aborting render of tooltip on element: ', elem);
-			return FALSE;
-		}
+		else { return FALSE; }
 	}
 
 	// Setup target options

diff --git a/dist/basic/jquery.qtip.min.css b/dist/basic/jquery.qtip.min.css
diff --git a/dist/basic/jquery.qtip.min.js b/dist/basic/jquery.qtip.min.js
diff --git a/dist/jquery.qtip.css b/dist/jquery.qtip.css
@@ -2,6 +2,23 @@
 * http://craigsworks.com/projects/qtip2/
 * Copyright (c) 2012 Craig Michael Thompson; Licensed MIT, GPL */
 
+/* Fluid class for determining actual width in IE */
+#qtip-rcontainer{
+	position: absolute;
+	left: -28000px;
+	top: -28000px;
+	display: block;
+	visibility: hidden;
+}
+
+	/* Fluid class for determining actual width in IE */
+	#qtip-rcontainer .ui-tooltip{
+		display: block !important;
+		visibility: hidden !important;
+		position: static !important;
+		float: left !important;
+	}
+
 /* Core qTip styles */
 .ui-tooltip, .qtip{
 	position: absolute;
@@ -19,14 +36,6 @@
 	border-style: solid;
 }
 
-	/* Fluid class for determining actual width in IE */
-	.ui-tooltip-fluid{
-		display: block;
-		visibility: hidden;
-		position: static !important;
-		float: left !important;
-	}
-
 	.ui-tooltip-content{
 		position: relative;
 		padding: 5px 9px;

diff --git a/dist/jquery.qtip.js b/dist/jquery.qtip.js
@@ -47,31 +47,17 @@
 		defaultClass = uitooltip + '-default',
 		focusClass = uitooltip + '-focus',
 		hoverClass = uitooltip + '-hover',
-		fluidClass = uitooltip + '-fluid',
-		hideOffset = '-31000px',
 		replaceSuffix = '_replacedByqTip',
 		oldtitle = 'oldtitle',
-		trackingBound;
-
-	/* Thanks to Paul Irish for this one: http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/ */
-	function log() {
-		log.history = log.history || [];
-		log.history.push(arguments);
-
-		// Make sure console is present
-		if('object' === typeof console) {
-
-			// Setup console and arguments
-			var c = console[ console.warn ? 'warn' : 'log' ],
-			args = Array.prototype.slice.call(arguments), a;
+		trackingBound,
+		redrawContainer;
 
-			// Add qTip2 marker to first argument if it's a string
-			if(typeof arguments[0] === 'string') { args[0] = 'qTip2: ' + args[0]; }
+	/*
+	* redraw() container for width/height calculations
+	*/
+	redrawContainer = $('<div/>', { id: 'qtip-rcontainer' });
+	$(function() { redrawContainer.appendTo(document.body); });
 
-			// Apply console.warn or .log if not supported
-			a = c.apply ? c.apply(console, args) : c(args);
-		}
-	}
 
 
 // Option object sanitizer
@@ -1290,25 +1276,25 @@ function QTip(target, options, id, attr)
 		{
 			if(self.rendered < 1 || isDrawing) { return self; }
 
-			var container = options.position.container,
+			var style = options.style,
+				container = options.position.container,
 				perc, width, max, min;
 
 			// Set drawing flag
 			isDrawing = 1;
 
-			// If tooltip has a set height, just set it... like a boss!
-			if(options.style.height) { tooltip.css(HEIGHT, options.style.height); }
-
-			// If tooltip has a set width, just set it... like a boss!
-			if(options.style.width) { tooltip.css(WIDTH, options.style.width); }
+			// If tooltip has a set height/width, just set it... like a boss!
+			if(style.height) { tooltip.css(HEIGHT, style.height); }
+			if(style.width) { tooltip.css(WIDTH, style.width); }
 
-			// Otherwise simualte max/min width...
+			// Simulate max/min width if not set width present...
 			else {
 				// Reset width and add fluid class
-				tooltip.css(WIDTH, '').addClass(fluidClass);
+				tooltip.css(WIDTH, '').appendTo(redrawContainer);
 
-				// Grab our tooltip width (add 1 so we don't get wrapping problems.. huzzah!)
-				width = tooltip.width() + 1;
+				// Grab our tooltip width (add 1 if odd so we don't get wrapping problems.. huzzah!)
+				width = tooltip.width();
+				if(width % 2) { width += 1; }
 
 				// Grab our max/min properties
 				max = tooltip.css('max-width') || '';
@@ -1323,7 +1309,7 @@ function QTip(target, options, id, attr)
 				width = max + min ? Math.min(Math.max(width, min), max) : width;
 
 				// Set the newly calculated width and remvoe fluid class
-				tooltip.css(WIDTH, Math.round(width)).removeClass(fluidClass);
+				tooltip.css(WIDTH, Math.round(width)).appendTo(container);
 			}
 
 			// Set drawing flag
@@ -1422,8 +1408,7 @@ function init(id, opts)
 	html5 = elem.data(opts.metadata.name || 'qtipopts');
 
 	// If we don't get an object returned attempt to parse it manualyl without parseJSON
-	try { html5 = typeof html5 === 'string' ? $.parseJSON(html5) : html5; }
-	catch(e) { log('Unable to parse HTML5 attribute data: ' + html5); }
+	try { html5 = typeof html5 === 'string' ? $.parseJSON(html5) : html5; } catch(e) {}
 
 	// Merge in and sanitize metadata
 	config = $.extend(TRUE, {}, QTIP.defaults, opts,
@@ -1442,10 +1427,7 @@ function init(id, opts)
 		if(config.content.attr !== FALSE && attr) { config.content.text = attr; }
 
 		// No valid content was found, abort render
-		else {
-			log('Unable to locate content for tooltip! Aborting render of tooltip on element: ', elem);
-			return FALSE;
-		}
+		else { return FALSE; }
 	}
 
 	// Setup target options
@@ -2148,6 +2130,11 @@ function Tip(qTip, command)
 		}
 	};
 
+	function whileVisible(callback) {
+		var visible = tooltip.is(':visible');
+		tooltip.show(); callback(); tooltip.toggle(visible);
+	}
+
 	function swapDimensions() {
 		size.width = opts.height;
 		size.height = opts.width;
@@ -2259,17 +2246,16 @@ function Tip(qTip, command)
 	function borderWidth(corner, side, backup) {
 		side = !side ? corner[corner.precedance] : side;
 
-		var isFluid = tooltip.hasClass(fluidClass),
-			isTitleTop = elems.titlebar && corner.y === TOP,
+		var isTitleTop = elems.titlebar && corner.y === TOP,
 			elem = isTitleTop ? elems.titlebar : elems.tooltip,
 			css = 'border-' + side + '-width',
 			val;
 
-		// Grab the border-width value (add fluid class if needed)
-		tooltip.addClass(fluidClass);
-		val = parseInt(elem.css(css), 10);
-		val = (backup ? val || parseInt(tooltip.css(css), 10) : val) || 0;
-		tooltip.toggleClass(fluidClass, isFluid);
+		// Grab the border-width value
+		whileVisible(function() {
+			val = parseInt(elem.css(css), 10);
+			val = (backup ? val || parseInt(tooltip.css(css), 10) : val) || 0;
+		});
 
 		return val;
 	}
@@ -2373,32 +2359,29 @@ function Tip(qTip, command)
 				useTitle = elems.titlebar && (corner.y === TOP || (corner.y === CENTER && tip.position().top + (size.height / 2) + opts.offset < elems.titlebar.outerHeight(1))),
 				colorElem = useTitle ? elems.titlebar : elems.tooltip;
 
-			// Apply the fluid class so we can see our CSS values properly
-			tooltip.addClass(fluidClass);
-
-			// Detect tip colours from CSS styles
-			color.fill = fill = tip.css(backgroundColor);
-			color.border = border = tip[0].style[ borderSideCamel ] || tip.css(borderSide) || tooltip.css(borderSide);
-
-			// Make sure colours are valid
-			if(!fill || invalid.test(fill)) {
-				color.fill = colorElem.css(backgroundColor) || transparent;
-				if(invalid.test(color.fill)) {
-					color.fill = tooltip.css(backgroundColor) || fill;
+			// Ensure tooltip is visible then...
+			whileVisible(function() {
+				// Detect tip colours from CSS styles
+				color.fill = fill = tip.css(backgroundColor);
+				color.border = border = tip[0].style[ borderSideCamel ] || tip.css(borderSide) || tooltip.css(borderSide);
+
+				// Make sure colours are valid
+				if(!fill || invalid.test(fill)) {
+					color.fill = colorElem.css(backgroundColor) || transparent;
+					if(invalid.test(color.fill)) {
+						color.fill = tooltip.css(backgroundColor) || fill;
+					}
 				}
-			}
-			if(!border || invalid.test(border) || border === $(document.body).css('color')) {
-				color.border = colorElem.css(borderSide) || transparent;
-				if(invalid.test(color.border) || color.border === colorElem.css('color')) {
-					color.border = tooltip.css(borderSide) || tooltip.css(borderSideCamel) || border;
+				if(!border || invalid.test(border) || border === $(document.body).css('color')) {
+					color.border = colorElem.css(borderSide) || transparent;
+					if(invalid.test(color.border) || color.border === colorElem.css('color')) {
+						color.border = tooltip.css(borderSide) || tooltip.css(borderSideCamel) || border;
+					}
 				}
-			}
 
-			// Reset background and border colours
-			$('*', tip).add(tip).css('cssText', backgroundColor+':'+transparent+important+';border:0'+important+';');
-
-			// Remove fluid class
-			tooltip.removeClass(fluidClass);
+				// Reset background and border colours
+				$('*', tip).add(tip).css('cssText', backgroundColor+':'+transparent+important+';border:0'+important+';');
+			});
 		},
 
 		create: function()