Skip to content

Tooltip: Properly track hiding and closing for delegated tooltips #1353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Tooltip: Properly track hiding and closing for delegated tooltips #1353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd162f6
Tooltip: Properly track hiding and closing for delegated tooltips
scottgonzalez Sep 30, 2014
e33b10b
[fixup]: Add test
scottgonzalez Oct 7, 2014
f226e82
[fixup]: Fix lint error
scottgonzalez Oct 9, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions tests/unit/tooltip/tooltip_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,4 +174,52 @@ asyncTest( "destroy during hide animation; only one close event", function() {
});
});

// http://bugs.jqueryui.com/ticket/10602
asyncTest( "multiple active delegated tooltips", function() {
expect( 1 );

var anchor = $( "#tooltipped1" ),
input = anchor.next(),
actions = [];

$( document ).tooltip({
show: false,
hide: false,
open: function( event, ui ) {
actions.push( "open:" + ui.tooltip.text() );
},
close: function( event, ui ) {
actions.push( "close:" + ui.tooltip.text() );
}
});

function step1() {
anchor.simulate( "mouseover" );
setTimeout( step2 );
}

function step2() {
input.simulate( "focus" );
setTimeout( step3 );
}

function step3() {
input.simulate( "blur" );
setTimeout( step4 );
}

function step4() {
anchor.simulate( "mouseout" );
deepEqual( actions, [
"open:anchortitle",
"open:inputtitle",
"close:inputtitle",
"close:anchortitle"
], "Both tooltips open and close" );
start();
}

step1();
});

}( jQuery ) );
62 changes: 36 additions & 26 deletions ui/tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ return $.widget( "ui.tooltip", {

// IDs of generated tooltips, needed for destroy
this.tooltips = {};

// IDs of parent tooltips where we removed the title attribute
this.parents = {};

Expand Down Expand Up @@ -117,8 +118,8 @@ return $.widget( "ui.tooltip", {
this._super( key, value );

if ( key === "content" ) {
$.each( this.tooltips, function( id, element ) {
that._updateContent( element );
$.each( this.tooltips, function( id, tooltipData ) {
that._updateContent( tooltipData.element );
});
}
},
Expand All @@ -127,9 +128,9 @@ return $.widget( "ui.tooltip", {
var that = this;

// close open tooltips
$.each( this.tooltips, function( id, element ) {
$.each( this.tooltips, function( id, tooltipData ) {
var event = $.Event( "blur" );
event.target = event.currentTarget = element[0];
event.target = event.currentTarget = tooltipData.element[ 0 ];
that.close( event, true );
});

Expand Down Expand Up @@ -231,7 +232,7 @@ return $.widget( "ui.tooltip", {
},

_open: function( event, target, content ) {
var tooltip, events, delayedShow, a11yContent,
var tooltipData, tooltip, events, delayedShow, a11yContent,
positionOption = $.extend( {}, this.options.position );

if ( !content ) {
Expand All @@ -240,9 +241,9 @@ return $.widget( "ui.tooltip", {

// Content can be updated multiple times. If the tooltip already
// exists, then just update the content and bail.
tooltip = this._find( target );
if ( tooltip.length ) {
tooltip.find( ".ui-tooltip-content" ).html( content );
tooltipData = this._find( target );
if ( tooltipData ) {
tooltipData.tooltip.find( ".ui-tooltip-content" ).html( content );
return;
}

Expand All @@ -261,7 +262,8 @@ return $.widget( "ui.tooltip", {
}
}

tooltip = this._tooltip( target );
tooltipData = this._tooltip( target );
tooltip = tooltipData.tooltip;
this._addDescribedBy( target, tooltip.attr( "id" ) );
tooltip.find( ".ui-tooltip-content" ).html( content );

Expand Down Expand Up @@ -296,8 +298,6 @@ return $.widget( "ui.tooltip", {
}, this.options.position ) );
}

this.hiding = false;
this.closing = false;
tooltip.hide();

this._show( tooltip, this.options.show );
Expand Down Expand Up @@ -343,13 +343,21 @@ return $.widget( "ui.tooltip", {
},

close: function( event ) {
var that = this,
var tooltip,
that = this,
target = $( event ? event.currentTarget : this.element ),
tooltip = this._find( target );
tooltipData = this._find( target );

// The tooltip may already be closed
if ( !tooltipData ) {
return;
}

tooltip = tooltipData.tooltip;

// disabling closes the tooltip, so we need to track when we're closing
// to avoid an infinite loop in case the tooltip becomes disabled on close
if ( this.closing ) {
if ( tooltipData.closing ) {
return;
}

Expand All @@ -364,12 +372,10 @@ return $.widget( "ui.tooltip", {

this._removeDescribedBy( target );

this.hiding = true;
tooltipData.hiding = true;
tooltip.stop( true );
this._hide( tooltip, this.options.hide, function() {
that._removeTooltip( $( this ) );
this.hiding = false;
this.closing = false;
});

target.removeData( "ui-tooltip-open" );
Expand All @@ -388,10 +394,10 @@ return $.widget( "ui.tooltip", {
});
}

this.closing = true;
tooltipData.closing = true;
this._trigger( "close", event, { tooltip: tooltip } );
if ( !this.hiding ) {
this.closing = false;
if ( !tooltipData.hiding ) {
tooltipData.closing = false;
}
},

Expand All @@ -407,13 +413,16 @@ return $.widget( "ui.tooltip", {
.appendTo( tooltip );

tooltip.appendTo( this.document[0].body );
this.tooltips[ id ] = element;
return tooltip;

return this.tooltips[ id ] = {
element: element,
tooltip: tooltip
};
},

_find: function( target ) {
var id = target.data( "ui-tooltip-id" );
return id ? $( "#" + id ) : $();
return id ? this.tooltips[ id ] : null;
},

_removeTooltip: function( tooltip ) {
Expand All @@ -425,10 +434,11 @@ return $.widget( "ui.tooltip", {
var that = this;

// close open tooltips
$.each( this.tooltips, function( id, element ) {
$.each( this.tooltips, function( id, tooltipData ) {
// Delegate to close method to handle common cleanup
var event = $.Event( "blur" );
event.target = event.currentTarget = element[0];
var event = $.Event( "blur" ),
element = tooltipData.element;
event.target = event.currentTarget = element[ 0 ];
that.close( event, true );

// Remove immediately; destroying an open tooltip doesn't use the
Expand Down