diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2011-05-30 18:42:06 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2011-05-30 18:42:06 -0400 |
| commit | e530d06c98571c9330fc8cfda62a438d07e8f65b (patch) | |
| tree | ef2e92bbddae9fa1a0b1b0085c529f435ad81be0 | |
| parent | 1b52cefc26da3a3c5bcb9116db79f68dbcc5de81 (diff) | |
| download | jquery-ui-e530d06c98571c9330fc8cfda62a438d07e8f65b.tar.gz jquery-ui-e530d06c98571c9330fc8cfda62a438d07e8f65b.zip | |
Tooltip: Pass the tooltip element in the open and close events.
| -rw-r--r-- | demos/tooltip/custom-animation.html | 21 | ||||
| -rw-r--r-- | ui/jquery.ui.tooltip.js | 13 |
2 files changed, 14 insertions, 20 deletions
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 @@ <p>There are various ways to customize the animation of a tooltip.</p> <p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p> -<p>You can also use the <a id="position-option" href="http://jqueryui.com/demos/tooltip/#option-position" title="move down on show">position option</a>.</p> +<p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p> </div><!-- End demo --> <div class="demo-description"> -<p>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.</p> +<p>This demo shows how to customize animations using the show and hide options, +as well as the open event.</p> </div><!-- End demo-description --> </body> 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 ) { |