Merge branch 'tooltip' into devpreview

author: jzaefferer <joern.zaefferer@gmail.com> 2010-11-19 19:06:53 +0100
committer: jzaefferer <joern.zaefferer@gmail.com> 2010-11-19 19:06:53 +0100
commit: b02b8e3ef585e0ca788687c60e8f15d8c809bd49 (patch)
tree: 4e2d7863369cfce9741c31888fdc8b5d4e68120d
parent: 5d37f63313cfad9a72566d95a3c85e8958cc0be4 (diff)
parent: 48a5977d3325869abd7b7ba835eb8ac331fd6eb5 (diff)
download: jquery-ui-b02b8e3ef585e0ca788687c60e8f15d8c809bd49.tar.gz
jquery-ui-b02b8e3ef585e0ca788687c60e8f15d8c809bd49.zip
15 files changed, 257 insertions, 90 deletions
diff --git a/demos/tooltip/ajax/content1.html b/demos/tooltip/ajax/content1.html
new file mode 100644
index 000000000..a1401b26d
--- /dev/null
+++ b/demos/tooltip/ajax/content1.html
@@ -0,0 +1 @@
+<p><strong>This content was loaded via ajax.</strong></p>
+\ No newline at end of file
diff --git a/demos/tooltip/ajax/content2.html b/demos/tooltip/ajax/content2.html
new file mode 100644
index 000000000..f4132d731
--- /dev/null
+++ b/demos/tooltip/ajax/content2.html
@@ -0,0 +1 @@
+<p><strong>This other content was loaded via ajax.</strong></p>
+\ No newline at end of file
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html
new file mode 100644
index 000000000..1353e3b91
--- /dev/null
+++ b/demos/tooltip/custom-animation.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Tooltip - Custom animation demo</title>
+	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<script type="text/javascript">
+	$(function() {
+		$(".demo").tooltip({
+			open: function() {
+				$(this).tooltip("widget").stop(false, true).hide().slideDown();
+			},
+			close: function() {
+				$(this).tooltip("widget").stop(false, true).show().slideUp();
+			}
+		});
+	});
+	</script>
+	<style>
+		label { display: inline-block; width: 5em; }
+	</style>
+</head>
+<body>
+
+<div class="demo">
+
+	<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+	the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
+	</p>
+	<p>But as it's not a native tooltip, it can be styled. Any themes built with
+	<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
+	will also style tooltip's accordingly.</p>
+	<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
+	<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
+	<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html
index 22dac4f90..59a32311f 100644
--- a/demos/tooltip/default.html
+++ b/demos/tooltip/default.html
@@ -11,7 +11,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
-		$("a, input").tooltip();
+		$(".demo").tooltip();
 	});
 	</script>
 	<style>
diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html
new file mode 100644
index 000000000..45548433d
--- /dev/null
+++ b/demos/tooltip/delegation-mixbag.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Tooltip - Default demo</title>
+	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<script type="text/javascript">
+	$(function() {
+		$(".demo").tooltip({
+			items: "[href], [title]",
+			content: function(response) {
+				var href = $(this).attr("href");
+				if (/^#/.test(href)) {
+					return $(href).html();
+				} else if (href) {
+					$.get(href, response);
+					return "loading...";
+				}
+				return this.title;
+			}
+		});
+		$("#footnotes").hide();
+	});
+	</script>
+	<style>
+		label { display: inline-block; width: 5em; }
+	</style>
+</head>
+<body>
+
+<div class="demo">
+	<ul>
+		<li>
+			<a href="#footnote1">I'm a link to a footnote.</a>
+		</li>
+		<li>
+			<a href="#footnote2">I'm another link to a footnote.</a>
+		</li>
+	</ul>
+	<input title="This is just an input, nothing special" />
+	
+	<ul>
+		<li>
+			<a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a>
+		</li>
+		<li>
+			<a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a>
+		</li>
+	</ul>
+	
+	<div id="footnotes">
+		<div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
+		<div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
+	</div>
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html
index ac0529680..183debf81 100644
--- a/demos/tooltip/forms.html
+++ b/demos/tooltip/forms.html
@@ -12,7 +12,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
-		$("[title]").tooltip();
+		$("[title]").tooltip().unbind(".tooltip");
 		$("<button/>").text("Show help").button().toggle(function() {
 			$(":ui-tooltip").tooltip("open");
 		}, function() {
@@ -59,7 +59,7 @@
 
 <div class="demo-description">
 
-<p>Hover the questionmark-buttons or use the button below to display the help texts all at once. Click again to hide them.</p>
+<p>Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.</p>
 
 <p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
 
diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html
index 9b1efefe4..6bc9c1e5c 100644
--- a/demos/tooltip/index.html
+++ b/demos/tooltip/index.html
@@ -12,6 +12,8 @@
 		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
 		<li><a href="forms.html">Forms with tooltips</a></li>
 		<li><a href="tracking.html">Track the mouse</a></li>
+		<li><a href="custom-animation.html">Custom animation</a></li>
+		<li><a href="delegation-mixbag.html">Delegation Mixbag</a></li>
 	</ul>
 </div>
 
diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html
index 9af4d0d09..286f01209 100644
--- a/demos/tooltip/tracking.html
+++ b/demos/tooltip/tracking.html
@@ -11,7 +11,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
-		$("a, input").tooltip({
+		$(".demo").tooltip({
 			open: function() {
 				var tooltip = $(this).tooltip("widget");
 				$(document).mousemove(function(event) {
diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html
index 37bfeafce..a5d76fb8f 100644
--- a/tests/unit/tooltip/tooltip.html
+++ b/tests/unit/tooltip/tooltip.html
@@ -9,6 +9,7 @@
 	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
 	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
 	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
 	<script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script>
 
 	<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
diff --git a/tests/unit/tooltip/tooltip_defaults.js b/tests/unit/tooltip/tooltip_defaults.js
index bcdcd4307..419d7a085 100644
--- a/tests/unit/tooltip/tooltip_defaults.js
+++ b/tests/unit/tooltip/tooltip_defaults.js
@@ -4,8 +4,8 @@
 
 var tooltip_defaults = {
 	disabled: false,
+	items: "[title]",
 	content: $.ui.tooltip.prototype.options.content,
-	tooltipClass: "ui-widget-content",
 	position: {
 		my: "left center",
 		at: "right center",
diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js
index 51c56b62e..35620df47 100644
--- a/tests/unit/tooltip/tooltip_events.js
+++ b/tests/unit/tooltip/tooltip_events.js
@@ -24,11 +24,11 @@ test("mouse events", function() {
 	var e = $("#tooltipped1").tooltip({
 		open: function(event, ui) {
 			same( event.type, "tooltipopen" );
-			same( event.originalEvent.type, "mouseenter" );
+			same( event.originalEvent.type, "mouseover" );
 		},
 		close: function(event, ui) {
 			same( event.type, "tooltipclose" );
-			same( event.originalEvent.type, "mouseleave" );
+			same( event.originalEvent.type, "mouseout" );
 		}
 	});
 	e.trigger("mouseover").trigger("mouseout");
diff --git a/tests/unit/tooltip/tooltip_methods.js b/tests/unit/tooltip/tooltip_methods.js
index 867923dd0..ace1a1288 100644
--- a/tests/unit/tooltip/tooltip_methods.js
+++ b/tests/unit/tooltip/tooltip_methods.js
@@ -20,4 +20,11 @@ test("open", function() {
 	$(":ui-tooltip").tooltip("destroy");
 });
 
+test("widget", function() {
+	var tooltip = $("#tooltipped1").tooltip();
+	same(tooltip.tooltip("widget")[0], $(".ui-tooltip")[0]);
+	same(tooltip.tooltip("widget").end()[0], tooltip[0]);
+});
+
+
 })(jQuery);
diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js
index e0262a947..6962d1e86 100644
--- a/tests/unit/tooltip/tooltip_options.js
+++ b/tests/unit/tooltip/tooltip_options.js
@@ -3,37 +3,52 @@
  */
 (function($) {
 
-module("tooltip: options");
-
-function contentTest(name, expected, impl) {
-	test(name, function() {
-		$("#tooltipped1").tooltip({
-			content: impl
-		}).tooltip("open");
-		same( $(".ui-tooltip").text(), expected );
+module("tooltip: options", {
+	teardown: function() {
 		$(":ui-tooltip").tooltip("destroy");
-	});
-}
-
-contentTest("content: default", "anchortitle");
-contentTest("content: return string", "customstring", function() {
-	return "customstring";
+	}
 });
-contentTest("content: callback string", "customstring2", function(response) {
-	response("customstring2");
+
+
+test("option: items", function() {
+	ok(false, "missing items test");
 });
 
-test("tooltipClass, default", function() {
+test("content: default", function() {
 	$("#tooltipped1").tooltip().tooltip("open");
-	same( $(".ui-tooltip").attr("class"), "ui-tooltip ui-widget ui-corner-all ui-widget-content");
-	$(":ui-tooltip").tooltip("destroy");
+	same( $(".ui-tooltip").text(), "anchortitle" );
+});
+
+test("content: return string", function() {
+	$("#tooltipped1").tooltip({
+		content: function() {
+			return "customstring";
+		}
+	}).tooltip("open");
+	same( $(".ui-tooltip").text(), "customstring" );
+});
+
+test("content: return jQuery", function() {
+	$("#tooltipped1").tooltip({
+		content: function() {
+			return $("<div></div>").html("cu<b>s</b>tomstring");
+		}
+	}).tooltip("open");
+	same( $(".ui-tooltip").text(), "customstring" );
 });
-test("tooltipClass, custom", function() {
+
+test("content: callback string", function() {
+	stop();
 	$("#tooltipped1").tooltip({
-		tooltipClass: "pretty fancy"
+		content: function(response) {
+			response("customstring2");
+			setTimeout(function() {
+				same( $(".ui-tooltip").text(), "customstring2" );
+				start();
+			}, 100)
+		}
 	}).tooltip("open");
-	same( $(".ui-tooltip").attr("class"), "ui-tooltip ui-widget ui-corner-all pretty fancy");
-	$(":ui-tooltip").tooltip("destroy");
+	
 });
 
 })(jQuery);
diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html
index 022093bc7..6d4e15c9e 100644
--- a/tests/visual/tooltip/tooltip.html
+++ b/tests/visual/tooltip/tooltip.html
@@ -21,18 +21,17 @@
 		
 		function enable() {
 			// default
-			$("#context1 a, form input, #childish").tooltip();
+			$("#context1, form, #childish").tooltip();
 			
 			// custom class, replaces ui-widget-content
-			$("#context2 [title]").tooltip({
-				tooltipClass: "ui-widget-header"
-			});
-			$("#right1").tooltip({
-				tooltipClass: "ui-state-error"
-			});
+			$("#context2").tooltip().each(function() {
+				$(this).tooltip("widget").addClass("ui-widget-header");
+			})
+			$("#right1").tooltip().tooltip("widget").addClass("ui-state-error");
 			
 			// synchronous content
-			$("#see-footnote").tooltip({
+			$("#footnotes").tooltip({
+				items: "[href^=#]",
 				content: function() {
 					return $($(this).attr("href")).html();
 				}
@@ -44,6 +43,24 @@
 					return "Loading...";
 				}
 			});
+			// asynchronous content with caching
+			var content;
+			$("#ajax2").tooltip({
+				content: function(response) {
+					if (content) {
+						return content;
+					}
+					$.ajax({
+						url: "ajaxcontent.php",
+						cache: false,
+						success: function(result) {
+							content = result;
+							response(result);
+						}
+					});
+					return "Loading...";
+				}
+			});
 			
 			// custom position
 			$("#right2").tooltip({
@@ -51,29 +68,28 @@
 					my: "center top",
 					at: "center bottom",
 					offset: "0 10"
-				},
-				tooltipClass: "ui-state-highlight"
-			});
-			
-			var positionOnTop = {
-				position: {
-					my: "center bottom",
-					at: "center top",
-					offset: "0 -5"
 				}
-			};
-			$("#button1").button().tooltip(positionOnTop);
+			}).tooltip("widget").addClass("ui-state-highlight");
+			
+			$("#button1").button();
 			$("#button2").button({
 				icons: {
 					primary: "ui-icon-wrench"
 				}
-			}).tooltip(positionOnTop);
+			});
 			$("#button3, #button4").button({
 				icons: {
 					primary: "ui-icon-wrench"
 				},
 				text: false
-			}).tooltip(positionOnTop);
+			});
+			$("#buttons").tooltip({
+				position: {
+					my: "center bottom",
+					at: "center top",
+					offset: "0 -5"
+				}
+			});
 		}
 		enable();
 		
@@ -106,8 +122,9 @@
 		collision detection should kick in around here
 	</div>
 	
-	<div style="margin: 2em 0">
-		<a id="see-footnote" href="#footnote">I'm a link to a footnote.</a>
+	<div id="footnotes" style="margin: 2em 0">
+		<a href="#footnote1">I'm a link to a footnote.</a>
+		<a href="#footnote2">I'm another link to a footnote.</a>
 	</div>
 	
 	<div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position">
@@ -117,6 +134,9 @@
 	<div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen">
 		gets its content via ajax
 	</div>
+	<div id="ajax2" style="width: 100px;" class="ui-widget-content" title="never be seen">
+		gets its content via ajax, caches the response
+	</div>
 	
 	<div id="context2" class="ui-widget ui-widget-content">
 		<span title="something" style="border:1px solid blue">span</span>
@@ -141,12 +161,15 @@
 		</div>
 	</form>
 	
-	<button id="button1" title="Button Tooltip">Button Label</button>
-	<button id="button2" title="Icon Button">Button with Icon</button>
-	<button id="button3">Icon Only Button 1</button>
-	<button id="button4">Icon Only Button 2</button>
+	<div id="buttons">
+		<button id="button1" title="Button Tooltip">Button Label</button>
+		<button id="button2" title="Icon Button">Button with Icon</button>
+		<button id="button3">Icon Only Button 1</button>
+		<button id="button4">Icon Only Button 2</button>
+	</div>
 	
-	<div id="footnote">This is <strong>the</strong> footnote, including other elements</div>
+	<div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
+	<div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
 	
 	<button id="disable">Toggle disabled</button>
 	<button id="toggle">Toggle widget</button>
diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js
index 134e7546a..122652bb0 100644
--- a/ui/jquery.ui.tooltip.js
+++ b/ui/jquery.ui.tooltip.js
@@ -1,29 +1,24 @@
 /*
  * jQuery UI Tooltip @VERSION
  *
- * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
+ * Copyright 2010, AUTHORS.txt
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
  *
  * http://docs.jquery.com/UI/Tooltip
  *
  * Depends:
  *	jquery.ui.core.js
  *	jquery.ui.widget.js
- *  jquery.ui.position.js
+ *	jquery.ui.position.js
  */
 (function($) {
 
-// role=application on body required for screenreaders to correctly interpret aria attributes
-if( !$(document.body).is('[role]') ){
-	$(document.body).attr('role','application');
-} 
-
 var increments = 0;
 
 $.widget("ui.tooltip", {
 	options: {
-		tooltipClass: "ui-widget-content",
+		items: "[title]",
 		content: function() {
 			return $(this).attr("title");
 		},
@@ -33,14 +28,13 @@ $.widget("ui.tooltip", {
 			offset: "15 0"
 		}
 	},
-	_init: function() {
+	_create: function() {
 		var self = this;
 		this.tooltip = $("<div></div>")
 			.attr("id", "ui-tooltip-" + increments++)
 			.attr("role", "tooltip")
 			.attr("aria-hidden", "true")
-			.addClass("ui-tooltip ui-widget ui-corner-all")
-			.addClass(this.options.tooltipClass)
+			.addClass("ui-tooltip ui-widget ui-corner-all ui-widget-content")
 			.appendTo(document.body)
 			.hide();
 		this.tooltipContent = $("<div></div>")
@@ -48,10 +42,10 @@ $.widget("ui.tooltip", {
 			.appendTo(this.tooltip);
 		this.opacity = this.tooltip.css("opacity");
 		this.element
-			.bind("focus.tooltip mouseenter.tooltip", function(event) {
+			.bind("focus.tooltip mouseover.tooltip", function(event) {
 				self.open( event );
 			})
-			.bind("blur.tooltip mouseleave.tooltip", function(event) {
+			.bind("blur.tooltip mouseout.tooltip", function(event) {
 				self.close( event );
 			});
 	},
@@ -70,11 +64,11 @@ $.widget("ui.tooltip", {
 	},
 	
 	widget: function() {
-		return this.tooltip;
+		return this.element.pushStack(this.tooltip.get());
 	},
 	
 	open: function(event) {
-		var target = this.element;
+		var target = $(event && event.target || this.element).closest(this.options.items);
 		// already visible? possible when both focus and mouseover events occur
 		if (this.current && this.current[0] == target[0])
 			return;
@@ -82,9 +76,12 @@ $.widget("ui.tooltip", {
 		this.current = target;
 		this.currentTitle = target.attr("title");
 		var content = this.options.content.call(target[0], function(response) {
-			// ignore async responses that come in after the tooltip is already hidden
-			if (self.current == target)
-				self._show(event, target, response);
+			// IE may instantly serve a cached response, need to give it a chance to finish with _show before that
+			setTimeout(function() {
+				// ignore async responses that come in after the tooltip is already hidden
+				if (self.current == target)
+					self._show(event, target, response);
+			}, 13);
 		});
 		if (content) {
 			self._show(event, target, content);
@@ -104,17 +101,14 @@ $.widget("ui.tooltip", {
 		this.tooltip.css({
 			top: 0,
 			left: 0
-		}).show().position($.extend(this.options.position, {
+		}).show().position( $.extend({
 			of: target
-		})).hide();
+		}, this.options.position )).hide();
 		
 		this.tooltip.attr("aria-hidden", "false");
 		target.attr("aria-describedby", this.tooltip.attr("id"));
 
-		if (this.tooltip.is(":animated"))
-			this.tooltip.stop().show().fadeTo("normal", this.opacity);
-		else
-			this.tooltip.is(':visible') ? this.tooltip.fadeTo("normal", this.opacity) : this.tooltip.fadeIn();
+		this.tooltip.stop(false, true).fadeIn();
 
 		this._trigger( "open", event );
 	},
@@ -132,12 +126,7 @@ $.widget("ui.tooltip", {
 		current.removeAttr("aria-describedby");
 		this.tooltip.attr("aria-hidden", "true");
 		
-		if (this.tooltip.is(':animated'))
-				this.tooltip.stop().fadeTo("normal", 0, function() {
-					$(this).hide().css("opacity", "");
-				});
-			else
-				this.tooltip.stop().fadeOut();
+		this.tooltip.stop(false, true).fadeOut();
 		
 		this._trigger( "close", event );
 	}
author	jzaefferer <joern.zaefferer@gmail.com>	2010-11-19 19:06:53 +0100
committer	jzaefferer <joern.zaefferer@gmail.com>	2010-11-19 19:06:53 +0100
commit	b02b8e3ef585e0ca788687c60e8f15d8c809bd49 (patch)
tree	4e2d7863369cfce9741c31888fdc8b5d4e68120d
parent	5d37f63313cfad9a72566d95a3c85e8958cc0be4 (diff)
parent	48a5977d3325869abd7b7ba835eb8ac331fd6eb5 (diff)
download	jquery-ui-b02b8e3ef585e0ca788687c60e8f15d8c809bd49.tar.gz jquery-ui-b02b8e3ef585e0ca788687c60e8f15d8c809bd49.zip