]> source.dussan.org Git - jquery-ui.git/commitdiff
Tooltip: Fixed handling of disabled tooltips.
authorScott González <scott.gonzalez@gmail.com>
Mon, 30 May 2011 00:50:21 +0000 (20:50 -0400)
committerScott González <scott.gonzalez@gmail.com>
Mon, 30 May 2011 00:50:21 +0000 (20:50 -0400)
tests/unit/tooltip/tooltip_methods.js
ui/jquery.ui.tooltip.js

index b1b319d9661ac367464e9e0d36f0be3f5d869cac..798d5589614dc3f3af69faeb7fa357b246ebdd4e 100644 (file)
@@ -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
index 8aba5974a487899b8a370f4eea21833cae9f35fd..d30e49c669a75e718389947732554e8432b4e64e 100644 (file)
@@ -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 );
 
-               // 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] ) {
+               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" ) );
+               }
+
                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 = $( "<div>" )
                                .attr({
@@ -169,7 +194,7 @@ $.widget( "ui.tooltip", {
                if ( $.fn.bgiframe ) {
                        tooltip.bgiframe();
                }
-               this.tooltips[ id ] = true;
+               this.tooltips[ id ] = element;
                return tooltip;
        },