play with tooltip growing css

don't forget to reenqble keyframe with a more
recent less compiler

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

@@ -27,14 +27,6 @@
     opacity: 0;
   }
 }
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
 @-moz-keyframes fadeIn {
   from {
     opacity: 0;
@@ -51,37 +43,26 @@
     opacity: 1;
   }
 }
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
 .tooltip a {
   float: right;
 }
 /*properties of tooltip after "expand"*/
 .bigtooltip {
-  height: 30%;
+  overflow: auto;
+  height: 200px;
 }
 /*properties of tooltip before "expand"*/
 .smalltooltip {
   text-overflow: ellipsis;
   overflow: hidden;
-  height: 20px;
+  height: 80px;
 }
 .tooltipbuttons {
   position: absolute;
+  padding-right: 15px;
   top: 0px;
   right: 0px;
 }
-.tooltiptext {
-  height: 200px;
-  overflow: auto;
-  padding-right: -10px;
-}
 .tooltip {
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
@@ -123,7 +104,6 @@
   padding-left: 7px;
   font-family: monospace;
   min-height: 50px;
-  max-height: 70%;
   position: absolute;
 }
 .pretooltiparrow {

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

@@ -34,28 +34,29 @@ var IPython = (function (IPython) {
 	// build the buttons menu on the upper right
         
 	// expand the tooltip to see more
-	var expandspan=$('<span/>').text('Expand')
-            .addClass('ui-icon')
-            .addClass('ui-icon-plus');
         var expandlink=$('<a/>').attr('href',"#")
               .addClass("ui-corner-all") //rounded corner
               .attr('role',"button")
               .attr('id','expanbutton')
-              .append(expandspan)
               .click(function(){
                   text.removeClass('smalltooltip');
                   text.addClass('bigtooltip');
                   $('#expanbutton').remove();
                   //setTimeout(function(){that.code_mirror.focus();}, 50);
-              });
+              })
+            .append(
+	 	$('<span/>').text('Expand')
+            	.addClass('ui-icon')
+            	.addClass('ui-icon-plus')
+		);
 
 	// open in pager
-        var morelink=$('<a/>').attr('href',"#");
-            morelink.attr('role',"button");
-            morelink.addClass('ui-button');
-        var morespan=$('<span/>').text('Open in Pager');
-            morespan.addClass('ui-icon');
-            morespan.addClass('ui-icon-arrowstop-l-n');
+        var morelink=$('<a/>').attr('href',"#")
+            .attr('role',"button")
+            .addClass('ui-button');
+        var morespan=$('<span/>').text('Open in Pager')
+            .addClass('ui-icon')
+            .addClass('ui-icon-arrowstop-l-n');
         morelink.append(morespan);
         morelink.click(function(){
             var msg_id = IPython.notebook.kernel.execute(name+"?");

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

@@ -35,10 +35,10 @@
     to {opacity:0;}
 }
 
-@keyframes fadeOut {
-    from {opacity:1;}
-    to {opacity:0;}
-}
+//@keyframes fadeOut {
+//    from {opacity:1;}
+//    to {opacity:0;}
+//}
 
 @-moz-keyframes fadeIn {
     from {opacity:0;}
@@ -50,10 +50,10 @@
     to {opacity:1;}
 }
 
-@keyframes fadeIn {
-    from {opacity:0;}
-    to {opacity:1;}
-}
+//@keyframes fadeIn {
+//    from {opacity:0;}
+//    to {opacity:1;}
+//}
 
 .linearGradient(@stop1:0, @color1:#ccc, @stop2:33%, @color2:#ddd, @stop3:66%, @color3:#ccc, @stop4:100%, @color4:#ddd){ 
   background-color:@color4;
@@ -80,26 +80,25 @@
 
 /*properties of tooltip after "expand"*/
 .bigtooltip {
-    height:30%;
+    overflow: auto;
+    height: 200px;
 }
 
 /*properties of tooltip before "expand"*/
 .smalltooltip{
     text-overflow: ellipsis;
     overflow: hidden;
-    height:20px;
+    height:80px;
 }
 .tooltipbuttons
 {
     position: absolute;
+    padding-right : 15px;
     top : 0px;
     right:0px;
 }
 .tooltiptext
 {
-    height: 200px;
-    overflow : auto;
-    padding-right: -10px; 
 }
 
 .tooltip {
@@ -136,7 +135,6 @@
     padding-left:7px;
     font-family: monospace;
     min-height:50px;
-    max-height : 70%;
     position: absolute;
 }