mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-06 11:35:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

animate tooltip position

Browse Source
This commit is contained in:
Matthias Bussonnier 2012-03-09 23:02:11 +01:00 committed by Brian Granger
parent b26b20e94f
commit e0cf20b423
3 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
IPython/frontend/html/notebook/static/css/tooltip.css
View File

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

4
IPython/frontend/html/notebook/static/js/tooltip.js
View File

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

26
IPython/frontend/html/notebook/static/less/tooltip.less
View File

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