Tooltip: Changed custom animation demo and changed the logic for showing tooltips...

diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html
index 23fa9aefe779c30ef7bb632c371f0432d8e32125..b8f012d91650eb65934a77c192de8e0b0ef23273 100644 (file)
--- a/demos/tooltip/custom-animation.html
+++ b/demos/tooltip/custom-animation.html
@@ -9,25 +9,35 @@
        <script src="../../ui/jquery.ui.widget.js"></script>
        <script src="../../ui/jquery.ui.position.js"></script>
        <script src="../../ui/jquery.ui.tooltip.js"></script>
+       <script src="../../ui/jquery.effects.core.js"></script>
+       <script src="../../ui/jquery.effects.explode.js"></script>
        <link rel="stylesheet" href="../demos.css">
-       <style>
-       label {
-               display: inline-block;
-               width: 5em;
-       }
-       </style>
        <script>
        $(function() {
-               $( ".demo" ).tooltip({
+               $( "#show-option" ).tooltip({
                        show: {
                                effect: "slideDown",
                                delay: 250
-                       },
+                       }
+               });
+               $( "#hide-option" ).tooltip({
                        hide: {
-                               effect: "hide",
+                               effect: "explode",
                                delay: 250
                        }
                });
+               $( "#position-option" ).tooltip({
+                       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" );
+                               }
+                       }
+               });
        });
        </script>
 </head>
@@ -35,14 +45,10 @@
 
 <div class="demo">
 
-<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
-the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
-<p>But as it's not a native tooltip, it can be styled. Any themes built with
-<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
-will also style tooltips accordingly.</p>
-<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
-<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
-<p>Hover the field to see the tooltip.</p>
+<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="show effect">show</a> and
+<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="hide effect">hide</a> options.</p>
+<p>You can also use the <a id="position-option" href="http://jqueryui.com/demos/tooltip/#option-position" title="position option">position option</a>.</p>
 
 </div><!-- End demo -->
 

diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js
index b781174c921e77b491a064ec8c2923757c2f7c64..c0aaa4fbea81b41716a902b1da1cbcaf8cf4be19 100644 (file)
--- a/ui/jquery.ui.tooltip.js
+++ b/ui/jquery.ui.tooltip.js
@@ -90,11 +90,16 @@ $.widget("ui.tooltip", {
                        target.attr( "aria-describedby", tooltip.attr( "id" ) );
                }
                tooltip.find( ".ui-tooltip-content" ).html( content );
-               tooltip.position( $.extend({
-                       of: target
-               }, this.options.position ) ).hide();
+               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 ) );
 
-               tooltip.stop( true );
                this._show( tooltip, this.options.show );
 
                this._trigger( "open", event );

diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js
index 4167fd4e5770a798bada79626d0cdc94d36624fa..3bf735cd3aece28ef86b06aa8a948262e454b567 100644 (file)
--- a/ui/jquery.ui.widget.js
+++ b/ui/jquery.ui.widget.js
@@ -379,7 +379,7 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
                var hasOptions = !$.isEmptyObject( options ),
                        effectName = options.effect || defaultEffect;
                options.complete = callback;
-               if (options.delay) {
+               if ( options.delay ) {
                        element.delay( options.delay );
                }
                if ( hasOptions && $.effects && ( $.effects.effect[ effectName ] || $.uiBackCompat !== false && $.effects[ effectName ] ) ) {