Tooltip: Replace blur with focusout to deal with inputs nested in tooltipped elements.

3 files changed, 27 insertions, 20 deletions

diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js
index 99e1fbd79..bf60c3cdc 100644
--- a/tests/unit/tooltip/tooltip_events.js
+++ b/tests/unit/tooltip/tooltip_events.js
@@ -47,9 +47,9 @@ test( "focus events", function() {
 	element.trigger( "focusin" );
 
 	element.one( "tooltipclose", function( event ) {
-		same( event.originalEvent.type, "blur" );
+		same( event.originalEvent.type, "focusout" );
 	});
-	element.trigger( "blur" );
+	element.trigger( "focusout" );
 });
 
 asyncTest( "mixed events", function() {
@@ -74,7 +74,7 @@ asyncTest( "mixed events", function() {
 
 	// blurring is async in IE
 	element.one( "tooltipclose", function( event ) {
-		same( event.originalEvent.type, "blur" );
+		same( event.originalEvent.type, "focusout" );
 		start();
 	});
 	element.simulate( "blur" );
diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html
index b282a73b7..eb51d56c6 100644
--- a/tests/visual/tooltip/tooltip.html
+++ b/tests/visual/tooltip/tooltip.html
@@ -23,8 +23,8 @@
 
 		function enable() {
 			// default
-			$("#context1, form, #childish").tooltip();
-			
+			$("#context1, form, #childish, #nested-input").tooltip();
+
 			// custom class, replaces ui-widget-content
 			$("#context2").tooltip({
 				tooltipClass: "ui-widget-header"
@@ -32,7 +32,7 @@
 			$("#right1").tooltip({
 				tooltipClass: "ui-state-error"
 			});
-			
+
 			// synchronous content
 			$("#footnotes").tooltip({
 				items: "[href^='#']",
@@ -65,7 +65,7 @@
 					return "Loading...";
 				}
 			});
-			
+
 			// custom position
 			$("#right2").tooltip({
 				tooltipClass: "ui-state-highlight",
@@ -75,7 +75,7 @@
 					offset: "0 10"
 				}
 			});
-			
+
 			$("#button1").button();
 			$("#button2").button({
 				icons: {
@@ -97,7 +97,7 @@
 			});
 		}
 		enable();
-		
+
 		$("#disable").toggle(function() {
 			$(":ui-tooltip").tooltip("disable");
 		}, function() {
@@ -126,23 +126,23 @@
 	<div id="right1" style="position: absolute; right: 1em" title="right aligned element">
 		collision detection should kick in around here
 	</div>
-	
+
 	<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">
 		right aligned with custom position
 	</div>
-	
+
 	<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>
 		<div title="something else" style="border:1px solid red;">
@@ -150,11 +150,11 @@
 			<span title="something more" style="border:1px solid green;">nested span</span>
 		</div>
 	</div>
-	
+
 	<div id="childish" class="ui-widget ui-widget-content" style="margin: 2em 0; border: 1px solid black;" title="element with child elements">
 		Text in <strong>bold</strong>.
 	</div>
-	
+
 	<form style="margin: 2em 0;">
 		<div>
 			<label for="first">First Name:</label>
@@ -165,17 +165,24 @@
 			<input id="last" title="Your last name is optional" />
 		</div>
 	</form>
-	
+
+	<div id="nested-input">
+		<label title="test"><input type="checkbox">This is a test</label>
+		<label title="test2"><input type="checkbox">This is a test</label>
+		<label><input type="checkbox" title="test3">This is a test</label>
+		<label><input type="checkbox" title="test4">This is a test</label>
+	</div>
+
 	<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="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>
 </div>
diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js
index cb23e9a4d..6a41f8c4a 100644
--- a/ui/jquery.ui.tooltip.js
+++ b/ui/jquery.ui.tooltip.js
@@ -157,7 +157,7 @@ $.widget( "ui.tooltip", {
 
 		this._bind( target, {
 			mouseleave: "close",
-			blur: "close",
+			focusout: "close",
 			keyup: function( event ) {
 				if ( event.keyCode == $.ui.keyCode.ESCAPE ) {
 					var fakeEvent = $.Event(event);
@@ -193,7 +193,7 @@ $.widget( "ui.tooltip", {
 		});
 
 		target.removeData( "tooltip-open" );
-		target.unbind( "mouseleave.tooltip blur.tooltip keyup.tooltip" );
+		target.unbind( "mouseleave.tooltip focusout.tooltip keyup.tooltip" );
 
 		this._trigger( "close", event, { tooltip: tooltip } );
 	},