Tooltip: Fix nested tooltips (on hover) by closing parent tooltips and removing title attributes. Fixes #8700 - Overlapping tooltipped elements shows native tooltip for one of the elements

1 files changed, 34 insertions, 4 deletions

diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js
index 2323ae243..73321633b 100644
--- a/ui/jquery.ui.tooltip.js
+++ b/ui/jquery.ui.tooltip.js
@@ -73,6 +73,8 @@ $.widget( "ui.tooltip", {
 
 		// IDs of generated tooltips, needed for destroy
 		this.tooltips = {};
+		// IDs of parent tooltips where we removed the title attribute
+		this.parents = {};
 	},
 
 	_setOption: function( key, value ) {
@@ -126,10 +128,11 @@ $.widget( "ui.tooltip", {
 	},
 
 	open: function( event ) {
-		var target = $( event ? event.target : this.element )
-			// we need closest here due to mouseover bubbling,
-			// but always pointing at the same event target
-			.closest( this.options.items );
+		var that = this,
+			target = $( event ? event.target : this.element )
+				// we need closest here due to mouseover bubbling,
+				// but always pointing at the same event target
+				.closest( this.options.items );
 
 		// No element to show a tooltip for
 		if ( !target.length ) {
@@ -154,6 +157,26 @@ $.widget( "ui.tooltip", {
 
 		target.data( "tooltip-open", true );
 
+		// kill parent tooltips, custom or native, for hover
+		if ( event && event.type === "mouseover" ) {
+			target.parents().each(function() {
+				var blurEvent;
+				if ( $( this ).data( "tooltip-open" ) ) {
+					blurEvent = $.Event( "blur" );
+					blurEvent.target = blurEvent.currentTarget = this;
+					that.close( blurEvent, true );
+				}
+				if ( this.title ) {
+					$( this ).uniqueId();
+					that.parents[ this.id ] = {
+						element: this,
+						title: this.title
+					};
+					this.title = "";
+				}
+			});
+		}
+
 		this._updateContent( target, event );
 	},
 
@@ -289,6 +312,13 @@ $.widget( "ui.tooltip", {
 		this._off( target, "mouseleave focusout keyup" );
 		this._off( this.document, "mousemove" );
 
+		if ( event && event.type === "mouseleave" ) {
+			$.each( this.parents, function( id, parent ) {
+				parent.element.title = parent.title;
+				delete that.parents[ id ];
+			});
+		}
+
 		this.closing = true;
 		this._trigger( "close", event, { tooltip: tooltip } );
 		this.closing = false;