animate tooltip position

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

View File

@ -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;
}

View File

@ -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');

View File

@ -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;
}