Tooltip: Fixed handling of disabled tooltips.

This commit is contained in:
Scott González 2011-05-29 20:50:21 -04:00
parent 76586076ec
commit 8c085cd27c
2 changed files with 69 additions and 18 deletions

View 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

View 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 );
// 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 = $( "<div>" )
.attr({
@ -169,7 +194,7 @@ $.widget( "ui.tooltip", {
if ( $.fn.bgiframe ) {
tooltip.bgiframe();
}
this.tooltips[ id ] = true;
this.tooltips[ id ] = element;
return tooltip;
},