diff --git a/IPython/frontend/html/notebook/static/css/tooltip.css b/IPython/frontend/html/notebook/static/css/tooltip.css index 12088c65d..a539dde76 100644 --- a/IPython/frontend/html/notebook/static/css/tooltip.css +++ b/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; } diff --git a/IPython/frontend/html/notebook/static/js/tooltip.js b/IPython/frontend/html/notebook/static/js/tooltip.js index 014f1d17d..03560ee25 100644 --- a/IPython/frontend/html/notebook/static/js/tooltip.js +++ b/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'); diff --git a/IPython/frontend/html/notebook/static/less/tooltip.less b/IPython/frontend/html/notebook/static/less/tooltip.less index 1c6cad9e9..ea5274f9d 100644 --- a/IPython/frontend/html/notebook/static/less/tooltip.less +++ b/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; }