From 77a55f1291861b87d30011ac5fd948f6b38d2c60 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=B6rn=20Zaefferer?= <joern.zaefferer@gmail.com>
Date: Fri, 19 Oct 2012 20:58:08 -0400
Subject: [PATCH] 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

---
 tests/visual/tooltip/tooltip.html |  8 +++++--
 ui/jquery.ui.tooltip.js           | 38 +++++++++++++++++++++++++++----
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html
index 56e5db10e..8f9b2e8df 100644
--- a/tests/visual/tooltip/tooltip.html
+++ b/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>.
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;
-- 
2.39.5