improve tooltip

	put "close" and "more..." button in upper right corner,
	rename "more..." to "open in pager", add expand button.

	tooltip don't have scroll bar an are 'small' until pressing "Expand"
	they then change their height and add scrollbars.
	Horizontal scrollbar behaviour seem to depend on the browser
	>>> plot(<tab> and then click on "expand" :
	Firefox : no horizontal scrollbar (wrap line ?)
	Chrome  : horizontal scrollbar

	beware that don't limitting tooltip height or width through css will sometime give
	tooltip that are too heigh and will overflow below the bottom of the screen

	animation are broken with max-height and/or min-height

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

@@ -364,10 +364,36 div.text_cell_render {
     to {opacity:1;}
 }
 
+/*"close" "expand" and "Open in pager button" of
+/* the tooltip*/
+.tooltip button{
+    float:right;
+}
+
+/*properties of tooltip after "expand"*/
+.bigtooltip{
+    height:420px;
+}
+
+/*properties of tooltip before "expand"*/
+.smalltooltip{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height:100px;
+}
 
 .tooltip{
-	border-radius: 0px 10px 10px 10px;
+    /*transition when "expand"ing tooltip */
+    -webkit-transition-property: height;
+    -webkit-transition-duration: 1s;
+    -moz-transition-property: height;
+    -moz-transition-duration: 1s;
+    transition-property: height;
+    transition-duration: 1s;
+    max-width:700px;
+    border-radius: 0px 10px 10px 10px;
     box-shadow: 3px 3px 5px #999;
+    /*fade-in animation when inserted*/
     -webkit-animation: fadeIn 200ms;
     -moz-animation: fadeIn 200ms;
     animation: fadeIn 200ms;

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

@@ -157,20 +157,22 var IPython = (function (IPython) {
         defstring=reply.definition;
         docstring=reply.docstring;
         name=reply.name;
-        shortened = function(string){
-            if(string.length > 200){
-                return string.trim().substring(0,197)+'...';
-            } else { return string.trim() }
-        }
 
         var that = this;
         var tooltip = $('<div/>').attr('id', 'tooltip').addClass('tooltip');
-        if(defstring){
-            defstring_html= $('<pre/>').html(utils.fixConsole(defstring));
-            tooltip.append(defstring_html);
-        }
-        var pre=$('<pre/>').html(utils.fixConsole(shortened(docstring)));
-        var more=$('<button/>').text('more...')
+        // remove to have the tooltip not Limited in X and Y
+        tooltip.addClass('smalltooltip');
+        var pre=$('<pre/>').html(utils.fixConsole(docstring));
+        var expand=$('<button/>').text('Expand...')
+        expand.attr('id','expanbutton');
+        expand.addClass('ui-button  ui-state-default ui-corner-all');
+        expand.click(function(){
+            tooltip.removeClass('smalltooltip');
+            tooltip.addClass('bigtooltip');
+            $('#expanbutton').remove();
+            setTimeout(function(){that.code_mirror.focus();}, 50);
+        });
+        var more=$('<button/>').text('Open in Pager')
         more.addClass('ui-button  ui-state-default ui-corner-all');
         more.click(function(){
             var msg_id = IPython.notebook.kernel.execute(name+"?");
@@ -179,14 +181,20 var IPython = (function (IPython) {
             setTimeout(function(){that.code_mirror.focus();}, 50);
         });
 
-        var close=$('<button/>').text('close')
+        var close=$('<button/>').text('Close')
         close.addClass('ui-button  ui-state-default ui-corner-all');
         close.click(function(){
             CodeCell.prototype.remove_and_cancell_tooltip(that.tooltip_timeout);
             setTimeout(function(){that.code_mirror.focus();}, 50);
             });
-        pre.append(more);
-        pre.append(close);
+        //construct the tooltip
+        tooltip.append(close);
+        tooltip.append(more);
+        tooltip.append(expand);
+        if(defstring){
+            defstring_html= $('<pre/>').html(utils.fixConsole(defstring));
+            tooltip.append(defstring_html);
+        }
         tooltip.append(pre);
         var pos = this.code_mirror.cursorCoords();
         tooltip.css('left',pos.x+'px');