Tooltip: handle removal of elements with delegated tooltips. Fixed #8646 - Delegated tooltips don't close when the tooltipped element is removed

Author: couchand

tests/unit/tooltip/tooltip.html

@@ -43,6 +43,7 @@ <h2 id="qunit-userAgent"></h2>
 	<input title="inputtitle">
 	<span id="multiple-describedby" aria-describedby="fixture-span" title="...">aria-describedby</span>
 	<span id="fixture-span" title="title-text">span</span>
+	<span id="contains-tooltipped"><span id="contained-tooltipped" title="foobar">baz</span></span>
 </div>
 
 </div>

tests/unit/tooltip/tooltip_core.js

@@ -44,4 +44,17 @@ test( "accessibility", function() {
 	equal( element.attr( "title" ), "...", "title restored when closed" );
 });
 
+test( "delegated removal", function() {
+	expect( 2 );
+
+	var container = $( "#contains-tooltipped" ).tooltip(),
+		element = $( "#contained-tooltipped" );
+
+	element.trigger( "mouseover" );
+	equal( $( ".ui-tooltip" ).length, 1 );
+
+	container.empty();
+	equal( $( ".ui-tooltip" ).length, 0 );
+});
+
 }( jQuery ) );

ui/jquery.ui.tooltip.js

@@ -207,6 +207,7 @@ $.widget( "ui.tooltip", {
 
 	_open: function( event, target, content ) {
 		var tooltip, positionOption, events;
+
 		if ( !content ) {
 			return;
 		}
@@ -268,6 +269,9 @@ $.widget( "ui.tooltip", {
 					fakeEvent.currentTarget = target[0];
 					this.close( fakeEvent, true );
 				}
+			},
+			remove: function( event ) {
+				this._removeTooltip( tooltip );
 			}
 		};
 		if ( !event || event.type === "mouseover" ) {
@@ -299,12 +303,15 @@ $.widget( "ui.tooltip", {
 
 		tooltip.stop( true );
 		this._hide( tooltip, this.options.hide, function() {
-			$( this ).remove();
-			delete that.tooltips[ this.id ];
+			that._removeTooltip( $( this ) );
 		});
 
 		target.removeData( "tooltip-open" );
 		this._off( target, "mouseleave focusout keyup" );
+		// Remove 'remove' binding only on delegated targets
+		if ( target[0] !== this.element[0] ) {
+			this._off( target, "remove" );
+		}
 		this._off( this.document, "mousemove" );
 
 		if ( event && event.type === "mouseleave" ) {
@@ -344,6 +351,11 @@ $.widget( "ui.tooltip", {
 		return id ? $( "#" + id ) : $();
 	},
 
+	_removeTooltip: function( tooltip ) {
+		tooltip.remove();
+		delete this.tooltips[ tooltip.attr( "id" ) ];
+	},
+
 	_destroy: function() {
 		var that = this;