diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index e96960f472..c7d1aa5b8a 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.