Tooltip: Only bind blur when opening via focus, mouseleave for mouseover. Remove the keep-open-on-focusout workaround. Now matching behaviour described in ARIA Authoring Practices. Fixes #8699 - Moving focus on click of a tooltipped element shows native tooltip in IE/Firefox on Windows

Author: jzaefferer

tests/visual/tooltip/tooltip.html

@@ -90,6 +90,10 @@
 				offset: "0 -5"
 			}
 		});
+
+		$( "#blurs-on-click" ).tooltip().click(function() {
+			$( "#focus-on-me" ).focus();
+		});
 	});
 	</script>
 </head>
@@ -154,6 +158,9 @@
 		</div>
 	</div>
 
+	<button id="blurs-on-click" title="button title text">click me to focus something else</button>
+	<input id="focus-on-me">
+
 	<div class="group">
 		<p>Play around with focusing and hovering of form elements.</p>
 		<form>

ui/jquery.ui.tooltip.js

@@ -206,7 +206,7 @@ $.widget( "ui.tooltip", {
 	},
 
 	_open: function( event, target, content ) {
-		var tooltip, positionOption;
+		var tooltip, positionOption, events;
 		if ( !content ) {
 			return;
 		}
@@ -261,17 +261,22 @@ $.widget( "ui.tooltip", {
 
 		this._trigger( "open", event, { tooltip: tooltip } );
 
-		this._on( target, {
-			mouseleave: "close",
-			focusout: "close",
+		events = {
 			keyup: function( event ) {
 				if ( event.keyCode === $.ui.keyCode.ESCAPE ) {
 					var fakeEvent = $.Event(event);
 					fakeEvent.currentTarget = target[0];
 					this.close( fakeEvent, true );
 				}
 			}
-		});
+		};
+		if ( !event || event.type === "mouseover" ) {
+			events.mouseleave = "close";
+		}
+		if ( !event || event.type === "focusin" ) {
+			events.focusout = "close";
+		}
+		this._on( target, events );
 	},
 
 	close: function( event, force ) {
@@ -285,16 +290,6 @@ $.widget( "ui.tooltip", {
 			return;
 		}
 
-		// don't close if the element has focus
-		// this prevents the tooltip from closing if you hover while focused
-		//
-		// we have to check the event type because tabbing out of the document
-		// may leave the element as the activeElement
-		if ( !force && event && event.type !== "focusout" &&
-				this.document[0].activeElement === target[0] ) {
-			return;
-		}
-
 		// only set title if we had one before (see comment in _open())
 		if ( target.data( "ui-tooltip-title" ) ) {
 			target.attr( "title", target.data( "ui-tooltip-title" ) );