From 1b52cefc26da3a3c5bcb9116db79f68dbcc5de81 Mon Sep 17 00:00:00 2001 From: Scott González Date: Mon, 30 May 2011 18:27:48 -0400 Subject: Widget: Fixed _show() and _hide() implementation and added tests. --- ui/jquery.ui.tooltip.js | 8 +++++++- ui/jquery.ui.widget.js | 18 +++++++++++++++--- 2 files changed, 22 insertions(+), 4 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index d30e49c66..a6ccc07bc 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -22,13 +22,19 @@ $.widget( "ui.tooltip", { content: function() { return $( this ).attr( "title" ); }, + hide: true, items: "[title]", position: { my: "left+15 center", at: "right center", collision: "flip fit" }, - tooltipClass: null + show: true, + tooltipClass: null, + + // callbacks + close: null, + open: null }, _create: function() { diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index da52a5a9c..00bc07c4f 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -375,9 +375,20 @@ $.Widget.prototype = { $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { $.Widget.prototype[ "_" + method ] = function( element, options, callback ) { + if ( typeof options === "string" ) { + options = { effect: options }; + } + var hasOptions, + effectName = !options ? + method : + options === true || typeof options === "number" ? + defaultEffect : + options.effect || defaultEffect; options = options || {}; - var hasOptions = !$.isEmptyObject( options ), - effectName = options.effect || defaultEffect; + if ( typeof options === "number" ) { + options = { duration: options }; + } + hasOptions = !$.isEmptyObject( options ); options.complete = callback; if ( options.delay ) { element.delay( options.delay ); @@ -387,11 +398,12 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { } else if ( effectName !== method && element[ effectName ] ) { element[ effectName ]( options.duration, options.easing, callback ); } else { - element.queue( function() { + element.queue(function( next ) { $( this )[ method ](); if ( callback ) { callback.call( element[ 0 ] ); } + next(); }); } }; -- cgit v1.2.3 From e530d06c98571c9330fc8cfda62a438d07e8f65b Mon Sep 17 00:00:00 2001 From: Scott González Date: Mon, 30 May 2011 18:42:06 -0400 Subject: Tooltip: Pass the tooltip element in the open and close events. --- demos/tooltip/custom-animation.html | 21 +++++++++------------ ui/jquery.ui.tooltip.js | 13 +++++-------- 2 files changed, 14 insertions(+), 20 deletions(-) (limited to 'ui') diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index e96960f47..c7d1aa5b8 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -26,16 +26,14 @@ delay: 250 } }); - $( "#position-option" ).tooltip({ + $( "#open-event" ).tooltip({ + show: null, position: { my: "left top", - at: "left bottom+10", - using: function( pos ) { - $( this ).css({ - left: pos.left, - top: pos.top - 10 - }).animate({ top: pos.top }, "fast" ); - } + at: "left bottom" + }, + open: function( event, ui ) { + ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); } }); }); @@ -48,16 +46,15 @@

There are various ways to customize the animation of a tooltip.

You can use the show and hide options.

-

You can also use the position option.

+

You can also use the open event.

-

This demo shows how to customize animations. The tooltip is shown, after a -delay of 250ms, using a slide down animation, and hidden, after another delay, -without an animation.

+

This demo shows how to customize animations using the show and hide options, +as well as the open event.

diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index a6ccc07bc..f19061bc3 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -138,16 +138,13 @@ $.widget( "ui.tooltip", { tooltip .stop( true ) .position( $.extend({ - of: target, - using: function( pos ) { - // we only want to hide if there's no custom using defined - $( this ).css( pos ).hide(); - } - }, this.options.position ) ); + of: target + }, this.options.position ) ) + .hide(); this._show( tooltip, this.options.show ); - this._trigger( "open", event ); + this._trigger( "open", event, { tooltip: tooltip } ); this._bind( target, { mouseleave: "close", @@ -181,7 +178,7 @@ $.widget( "ui.tooltip", { target.unbind( "mouseleave.tooltip blur.tooltip" ); - this._trigger( "close", event ); + this._trigger( "close", event, { tooltip: tooltip } ); }, _tooltip: function( element ) { -- cgit v1.2.3