Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Tooltip: Fix nested tooltips (on hover) by closing parent tooltips an…
…d removing title attributes. Fixes #8700 - Overlapping tooltipped elements shows native tooltip for one of the elements
  • Loading branch information
jzaefferer committed Oct 21, 2012
1 parent 9d5f91e commit 77a55f1
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 6 deletions.
8 changes: 6 additions & 2 deletions tests/visual/tooltip/tooltip.html
Expand Up @@ -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>.
Expand Down
38 changes: 34 additions & 4 deletions ui/jquery.ui.tooltip.js
Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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 ) {
Expand All @@ -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 );
},

Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 77a55f1

Please sign in to comment.