Tooltip: Do not attempt to position if tooltip is hidden. Fixed #8644 - Delayed tooltips set to track should reposition when being shown for the first time.

Author: couchand

tests/unit/tooltip/tooltip_options.js

@@ -103,4 +103,39 @@ test( "tooltipClass", function() {
 	ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) );
 });
 
+test( "track + show delay", function() {
+	expect( 2 );
+	var event,
+		leftVal = 314,
+		topVal = 159,
+		offsetVal = 26,
+		element = $( "#tooltipped1" ).tooltip({
+			track: true,
+			show: {
+				delay: 1
+			},
+			position: {
+				my: "left+" + offsetVal + " top+" + offsetVal,
+				at: "right bottom"
+			}
+		});
+
+	event = $.Event( "mouseover" );
+	event.target = $( "#tooltipped1" )[ 0 ];
+	event.originalEvent = { type: "mouseover" };
+	event.pageX = leftVal;
+	event.pageY = topVal;
+	element.trigger( event );
+
+	event = $.Event( "mousemove" );
+	event.target = $( "#tooltipped1" )[ 0 ];
+	event.originalEvent = { type: "mousemove" };
+	event.pageX = leftVal;
+	event.pageY = topVal;
+	element.trigger( event );
+
+	equal( $( ".ui-tooltip" ).css( "left" ), leftVal + offsetVal + "px" );
+	equal( $( ".ui-tooltip" ).css( "top" ), topVal + offsetVal + "px" );
+});
+
 }( jQuery ) );

tests/visual/tooltip/tooltip.html

@@ -91,7 +91,12 @@
 			}
 		});
 
-		$( "#blurs-on-click" ).tooltip().click(function() {
+		$( "#blurs-on-click" ).tooltip({
+			track: true,
+			show: {
+				delay: 500
+			}
+		}).click(function() {
 			$( "#focus-on-me" ).focus();
 		});
 	});

ui/jquery.ui.tooltip.js

@@ -206,7 +206,8 @@ $.widget( "ui.tooltip", {
 	},
 
 	_open: function( event, target, content ) {
-		var tooltip, positionOption, events;
+		var tooltip, events, delayedShow,
+			positionOption = $.extend( {}, this.options.position );
 
 		if ( !content ) {
 			return;
@@ -241,10 +242,12 @@ $.widget( "ui.tooltip", {
 
 		function position( event ) {
 			positionOption.of = event;
+			if ( tooltip.is( ":hidden" ) ) {
+				return;
+			}
 			tooltip.position( positionOption );
 		}
 		if ( this.options.track && event && /^mouse/.test( event.originalEvent.type ) ) {
-			positionOption = $.extend( {}, this.options.position );
 			this._on( this.document, {
 				mousemove: position
 			});
@@ -259,6 +262,17 @@ $.widget( "ui.tooltip", {
 		tooltip.hide();
 
 		this._show( tooltip, this.options.show );
+		// Handle tracking tooltips that are shown with a delay (#8644). As soon
+		// as the tooltip is visible, position the tooltip using the most recent
+		// event.
+		if ( this.options.show && this.options.show.delay ) {
+			delayedShow = setInterval(function() {
+				if ( tooltip.is( ":visible" ) ) {
+					position( positionOption.of );
+					clearInterval( delayedShow );
+				}
+			}, $.fx.interval );
+		}
 
 		this._trigger( "open", event, { tooltip: tooltip } );