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

Author: jzaefferer

tests/visual/tooltip/tooltip.html

@@ -140,10 +140,14 @@
 	<div class="group" style="width: 300px;">
 		<p>Nested elements.</p>
 		<div id="context2">
-			<div title="something else" style="border:1px solid red;">
+			<div title="nested parent" style="border:1px solid red;">
 				tooltipped
-				<span title="something more" style="border:1px solid green; padding-left: 50px;">nested tooltipped</span>
+				<span title="nested child" style="border:1px solid green; padding-left: 25px;">
+					nested tooltipped
+					<span title="nested nested child" style="border:1px solid blue; padding-left: 25px;">third level</span>
+				</span>
 			</div>
+			<input title="nested input title">
 		</div>
 		<div id="childish" style="border: 1px solid black;" title="element with child elements">
 			Text in <strong>bold</strong>.

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;