From 8c085cd27ce5d2c765a2d762a863e52d1fc6308c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Sun, 29 May 2011 20:50:21 -0400 Subject: [PATCH] Tooltip: Fixed handling of disabled tooltips. --- tests/unit/tooltip/tooltip_methods.js | 26 ++++++++++++ ui/jquery.ui.tooltip.js | 61 +++++++++++++++++++-------- 2 files changed, 69 insertions(+), 18 deletions(-) diff --git a/tests/unit/tooltip/tooltip_methods.js b/tests/unit/tooltip/tooltip_methods.js index b1b319d96..798d55896 100644 --- a/tests/unit/tooltip/tooltip_methods.js +++ b/tests/unit/tooltip/tooltip_methods.js @@ -28,6 +28,32 @@ test( "open/close", function() { $.fx.off = false; }); +test( "enable/disable", function() { + expect( 7 ); + $.fx.off = true; + var element = $( "#tooltipped1" ).tooltip(); + equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); + + element.tooltip( "open" ); + var tooltip = $( "#" + element.attr( "aria-describedby" ) ); + ok( tooltip.is( ":visible" ) ); + + element.tooltip( "disable" ); + equal( $( ".ui-tooltip" ).length, 0, "no tooltip when disabled" ); + equal( tooltip.attr( "title" ), "", "title removed on disable" ); + + element.tooltip( "open" ); + equal( $( ".ui-tooltip" ).length, 0, "open does nothing when disabled" ); + + element.tooltip( "enable" ); + equal( element.attr( "title" ), "anchortitle", "title restored on enable" ); + + element.tooltip( "open" ); + tooltip = $( "#" + element.attr( "aria-describedby" ) ); + ok( tooltip.is( ":visible" ) ); + $.fx.off = false; +}); + /* TODO currently tooltip doesn't override widget can't return anything useful if no element is kept around and there's no useful reference diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 8aba5974a..d30e49c66 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -42,14 +42,46 @@ $.widget( "ui.tooltip", { }, _setOption: function( key, value ) { - // only set option, disable element style changes if ( key === "disabled" ) { + this[ value ? "_disable" : "_enable" ](); this.options[ key ] = value; + // disable element style changes return; } this._super( "_setOption", key, value ); }, + _disable: function() { + var that = this; + + // close open tooltips + $.each( this.tooltips, function( id, element ) { + var event = $.Event( "blur" ); + event.target = event.currentTarget = element[0]; + that.close( event, true ); + }); + + // remove title attributes to prevent native tooltips + this.element.find( this.options.items ).andSelf().each(function() { + var element = $( this ); + if ( element.is( "[title]" ) ) { + element + .data( "tooltip-title", element.attr( "title" ) ) + .attr( "title", "" ); + } + }); + }, + + _enable: function() { + // restore title attributes + this.element.find( this.options.items ).andSelf().each(function() { + var element = $( this ); + if ( element.data( "tooltip-title" ) ) { + element.attr( "title", element.data( "tooltip-title" ) ); + } + }); + }, + open: function( event ) { var content, that = this, @@ -83,9 +115,6 @@ $.widget( "ui.tooltip", { } // if we have a title, clear it to prevent the native tooltip - // we do this before the disabled check to prevent native tooltips - // even when disabled - // TODO: the above doesn't work since ._bind() does a disabled check // we have to check first to avoid defining a title if none exists // (we don't want to cause an element to start matching [title]) // TODO: document why we don't use .removeAttr() @@ -93,14 +122,10 @@ $.widget( "ui.tooltip", { target.attr( "title", "" ); } - if ( this.options.disabled ) { - return; - } - // ajaxy tooltip can update an existing one var tooltip = this._find( target ); if ( !tooltip.length ) { - tooltip = this._tooltip(); + tooltip = this._tooltip( target ); target.attr( "aria-describedby", tooltip.attr( "id" ) ); } tooltip.find( ".ui-tooltip-content" ).html( content ); @@ -124,22 +149,22 @@ $.widget( "ui.tooltip", { }); }, - close: function( event ) { + close: function( event, force ) { var that = this, target = $( event ? event.currentTarget : this.element ), tooltip = this._find( target ); + // don't close if the element has focus + // this prevents the tooltip from closing if you hover while focused + if ( !force && document.activeElement === target[0] ) { + return; + } + // only set title if we had one before (see comment in _open()) if ( target.data( "tooltip-title" ) ) { target.attr( "title", target.data( "tooltip-title" ) ); } - // don't close if the element has focus - // this prevents the tooltip from closing if you hover while focused - if ( this.options.disabled || document.activeElement === target[0] ) { - return; - } - target.removeAttr( "aria-describedby" ); tooltip.stop( true ); @@ -153,7 +178,7 @@ $.widget( "ui.tooltip", { this._trigger( "close", event ); }, - _tooltip: function() { + _tooltip: function( element ) { var id = "ui-tooltip-" + increments++, tooltip = $( "
" ) .attr({ @@ -169,7 +194,7 @@ $.widget( "ui.tooltip", { if ( $.fn.bgiframe ) { tooltip.bgiframe(); } - this.tooltips[ id ] = true; + this.tooltips[ id ] = element; return tooltip; },