animate tooltip position

IPython/frontend/html/notebook/static/css/tooltip.css

@@ -64,10 +64,10 @@
   right: 0px;
 }
 .tooltip {
-  -webkit-transition: all 0.2s ease;
-  -moz-transition: all 0.2s ease;
-  -ms-transition: all 0.2s ease;
-  -o-transition: all 0.2s ease;
+  -webkit-transition: all 0.8s ease;
+  -moz-transition: all 0.8s ease;
+  -ms-transition: all 0.8s ease;
+  -o-transition: all 0.8s ease;
   /*transition when "expand"ing tooltip */
 
   -webkit-transition-property: height;
@@ -81,12 +81,12 @@
   box-shadow: 3px 3px 5px #999;
   /*fade-in animation when inserted*/
 
-  -webkit-animation: fadeOut 200ms;
-  -moz-animation: fadeOut 200ms;
-  animation: fadeOut 200ms;
-  -webkit-animation: fadeIn 200ms;
-  -moz-animation: fadeIn 200ms;
-  animation: fadeIn 200ms;
+  -webkit-animation: fadeOut 800ms;
+  -moz-animation: fadeOut 800ms;
+  animation: fadeOut 800ms;
+  -webkit-animation: fadeIn 800ms;
+  -moz-animation: fadeIn 800ms;
+  animation: fadeIn 800ms;
   vertical-align: middle;
   background-color: #f7f7f7;
   background-image: -webkit-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%);
@@ -131,8 +131,8 @@
   -o-transform: rotate(45deg);
 }
 .tooltip.hide {
-  -webkit-animation: fadeOut 200ms;
-  -moz-animation: fadeOut 200ms;
-  animation: fadeOut 200ms;
+  -webkit-animation: fadeOut 800ms;
+  -moz-animation: fadeOut 800ms;
+  animation: fadeOut 800ms;
   opacity: 0;
 }

IPython/frontend/html/notebook/static/js/tooltip.js

@@ -125,8 +125,8 @@ var IPython = (function (IPython) {
 
     Tooltip.prototype.show = function(reply,pos)
     {
-        this.tooltip.css('left',pos.x-30+'px');
-        this.tooltip.css('top',(pos.yBot+10)+'px');
+        this.tooltip.animate({'left' : pos.x-30+'px'});
+        this.tooltip.animate({'top' :(pos.yBot+10)+'px'});
     	this.tooltip.removeClass('hidden')
     	this.tooltip.removeClass('hide');
 

IPython/frontend/html/notebook/static/less/tooltip.less

@@ -102,10 +102,10 @@
 }
 
 .tooltip {
-  -webkit-transition: all 0.2s ease;
-  -moz-transition:    all 0.2s ease;
-  -ms-transition:     all 0.2s ease;
-  -o-transition:      all 0.2s ease;
+  -webkit-transition: all 0.8s ease;
+  -moz-transition:    all 0.8s ease;
+  -ms-transition:     all 0.8s ease;
+  -o-transition:      all 0.8s ease;
     /*transition when "expand"ing tooltip */
     -webkit-transition-property: height;
     -webkit-transition-duration: 1s;
@@ -117,12 +117,12 @@
     border-radius: 10px 10px 10px 10px;
     box-shadow: 3px 3px 5px #999;
     /*fade-in animation when inserted*/
-    -webkit-animation: fadeOut 200ms;
-    -moz-animation: fadeOut 200ms;
-    animation: fadeOut 200ms;
-    -webkit-animation: fadeIn 200ms;
-    -moz-animation: fadeIn 200ms;
-    animation: fadeIn 200ms;
+    -webkit-animation: fadeOut 800ms;
+    -moz-animation: fadeOut 800ms;
+    animation: fadeOut 800ms;
+    -webkit-animation: fadeIn 800ms;
+    -moz-animation: fadeIn 800ms;
+    animation: fadeIn 800ms;
     vertical-align: middle;
     
     .linearGradient(13%,@c1, 39%, @c2 , 56%,@c3, 91% , @c4) ;
@@ -169,9 +169,9 @@
 
 .tooltip.hide
 {
-    -webkit-animation: fadeOut 200ms;
-    -moz-animation: fadeOut 200ms;
-    animation: fadeOut 200ms;
+    -webkit-animation: fadeOut 800ms;
+    -moz-animation: fadeOut 800ms;
+    animation: fadeOut 800ms;
     opacity : 0;
 
 }