multiple tooltip action

consecutives tab pressing with tooltip does :
    - fisrt : show it
    - second :  expand it
    - third : make it sticky for 10s (typing wont dismiss it)
    - forth : send the content into the Pager

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

@@ -1,552 +1,532
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CodeCell
 //============================================================================
 
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
     var key   = IPython.utils.keycodes;
 
     var CodeCell = function (notebook) {
         this.code_mirror = null;
         this.input_prompt_number = null;
         this.outputs = [];
         this.collapsed = false;
-        this.tooltip_timeout = null;
         this.clear_out_timeout = null;
         IPython.Cell.apply(this, arguments);
     };
 
 
     CodeCell.prototype = new IPython.Cell();
 
 
     CodeCell.prototype.create_element = function () {
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
         cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
         var input_area = $('<div/>').addClass('input_area box-flex1');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: 'python',
             theme: 'ipython',
             readOnly: this.read_only,
             onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
         });
         input.append(input_area);
         var output = $('<div></div>').addClass('output vbox');
         cell.append(input).append(output);
         this.element = cell;
         this.collapse();
 
         // construct a completer
         this.completer = new IPython.Completer(this);
     };
 
-    //TODO, try to diminish the number of parameters.
-    CodeCell.prototype.request_tooltip_after_time = function (pre_cursor,time){
-        var that = this;
-        if (pre_cursor === "" || pre_cursor === "(" ) {
-            // don't do anything if line beggin with '(' or is empty
-        } else {
-            if(time ==0)
-            { IPython.tooltip.request(that, pre_cursor) }
-            else
-            { IPython.tooltip.pending(that, pre_cursor) }
-        }
-    };
-
     CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
         // This method gets called in CodeMirror's onKeyDown/onKeyPress
         // handlers and is used to provide custom key handling. Its return
         // value is used to determine if CodeMirror should ignore the event:
         // true = ignore, false = don't ignore.
         
         if (this.read_only){
             return false;
         }
         
-        // note that we are comparing and setting the time to wait at each key press.
-        // a better way might be to generate a new function on each time change and
-        // assign it to CodeCell.prototype.request_tooltip_after_time
-        var tooltip_wait_time = this.notebook.time_before_tooltip;
         var tooltip_on_tab    = this.notebook.tooltip_on_tab;
         var that = this;
         // whatever key is pressed, first, cancel the tooltip request before
-        // they are sent, and remove tooltip if any
-        if(event.type === 'keydown' ) {
+        // they are sent, and remove tooltip if any, except for tab again
+        if(event.type === 'keydown' && event.which != key.tab ) {
             IPython.tooltip.remove_and_cancel_tooltip();
         };
 
 
         if (event.keyCode === key.enter && (event.shiftKey || event.ctrlKey)) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
-        } else if (event.which === 40 && event.type === 'keypress' && tooltip_wait_time >= 0) {
-            // triger aon keypress (!) otherwise inconsistent event.which depending on plateform
+        } else if (event.which === 40 && event.type === 'keypress' && this.notebook.time_before_tooltip >= 0) {
+            // triger on keypress (!) otherwise inconsistent event.which depending on plateform
             // browser and keyboard layout !
             // Pressing '(' , request tooltip, don't forget to reappend it
-            var cursor = editor.getCursor();
-            var pre_cursor = editor.getRange({line:cursor.line,ch:0},cursor).trim()+'(';
-            that.request_tooltip_after_time(pre_cursor,tooltip_wait_time);
+            IPython.tooltip.pending(that);
         } else if (event.which === key.upArrow) {
             // If we are not at the top, let CM handle the up arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_top()) {
                 event.stop();
                 return false;
             } else {
                 return true; 
             };
         } else if (event.which === key.downArrow) {
             // If we are not at the bottom, let CM handle the down arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_bottom()) {
                 event.stop();
                 return false;
             } else {
                 return true; 
             };
         } else if (event.keyCode === key.tab && event.type == 'keydown') {
             // Tab completion.
             var cur = editor.getCursor();
             //Do not trim here because of tooltip
             var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
             if (pre_cursor.trim() === "") {
                 // Don't autocomplete if the part of the line before the cursor
                 // is empty.  In this case, let CodeMirror handle indentation.
                 return false;
             } else if ((pre_cursor.substr(-1) === "("|| pre_cursor.substr(-1) === " ") && tooltip_on_tab ) {
-                that.request_tooltip_after_time(pre_cursor,0);
+                IPython.tooltip.request(that);
                 // Prevent the event from bubbling up.
                 event.stop();
                 // Prevent CodeMirror from handling the tab.
                 return true;
             } else {
                 event.stop();
                 this.completer.startCompletion();
                 return true;
             };
         } else if (event.keyCode === key.backspace && event.type == 'keydown') {
             // If backspace and the line ends with 4 spaces, remove them.
             var cur = editor.getCursor();
             var line = editor.getLine(cur.line);
             var ending = line.slice(-4);
             if (ending === '    ') {
                 editor.replaceRange('',
                     {line: cur.line, ch: cur.ch-4},
                     {line: cur.line, ch: cur.ch}
                 );
                 event.stop();
                 return true;
             } else {
                 return false;
             };
         } else {
             // keypress/keyup also trigger on TAB press, and we don't want to
             // use those to disable tab completion.
             return false;
         };
         return false;
     };
 
     CodeCell.prototype.finish_tooltip = function (reply) {
         IPython.tooltip.show(reply, this);
     };
 
 
     // called when completion came back from the kernel. just forward
     CodeCell.prototype.finish_completing = function (matched_text, matches) {
         this.completer.finish_completing(matched_text,matches);
     }
 
 
     CodeCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         this.code_mirror.refresh();
         this.code_mirror.focus();
         // We used to need an additional refresh() after the focus, but
         // it appears that this has been fixed in CM. This bug would show
         // up on FF when a newly loaded markdown cell was edited.
     };
 
 
     CodeCell.prototype.select_all = function () {
         var start = {line: 0, ch: 0};
         var nlines = this.code_mirror.lineCount();
         var last_line = this.code_mirror.getLine(nlines-1);
         var end = {line: nlines-1, ch: last_line.length};
         this.code_mirror.setSelection(start, end);
     };
 
 
     CodeCell.prototype.append_output = function (json, dynamic) {
         // If dynamic is true, javascript output will be eval'd.
         this.expand();
         this.flush_clear_timeout();
         if (json.output_type === 'pyout') {
             this.append_pyout(json, dynamic);
         } else if (json.output_type === 'pyerr') {
             this.append_pyerr(json);
         } else if (json.output_type === 'display_data') {
             this.append_display_data(json, dynamic);
         } else if (json.output_type === 'stream') {
             this.append_stream(json);
         };
         this.outputs.push(json);
     };
 
 
     CodeCell.prototype.create_output_area = function () {
         var oa = $("<div/>").addClass("hbox output_area");
         oa.append($('<div/>').addClass('prompt'));
         return oa;
     };
 
 
     CodeCell.prototype.append_pyout = function (json, dynamic) {
         var n = json.prompt_number || ' ';
         var toinsert = this.create_output_area();
         toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
         this.append_mime_type(json, toinsert, dynamic);
         this.element.find('div.output').append(toinsert);
         // If we just output latex, typeset it.
         if ((json.latex !== undefined) || (json.html !== undefined)) {
             this.typeset();
         };
     };
 
 
     CodeCell.prototype.append_pyerr = function (json) {
         var tb = json.traceback;
         if (tb !== undefined && tb.length > 0) {
             var s = '';
             var len = tb.length;
             for (var i=0; i<len; i++) {
                 s = s + tb[i] + '\n';
             }
             s = s + '\n';
             var toinsert = this.create_output_area();
             this.append_text(s, toinsert);
             this.element.find('div.output').append(toinsert);
         };
     };
 
 
     CodeCell.prototype.append_stream = function (json) {
         // temporary fix: if stream undefined (json file written prior to this patch),
         // default to most likely stdout:
         if (json.stream == undefined){
             json.stream = 'stdout';
         }
         if (!utils.fixConsole(json.text)){
             // fixConsole gives nothing (empty string, \r, etc.)
             // so don't append any elements, which might add undesirable space
             return;
         }
         var subclass = "output_"+json.stream;
         if (this.outputs.length > 0){
             // have at least one output to consider
             var last = this.outputs[this.outputs.length-1];
             if (last.output_type == 'stream' && json.stream == last.stream){
                 // latest output was in the same stream,
                 // so append directly into its pre tag
                 // escape ANSI & HTML specials:
                 var text = utils.fixConsole(json.text);
                 this.element.find('div.'+subclass).last().find('pre').append(text);
                 return;
             }
         }
         
         // If we got here, attach a new div
         var toinsert = this.create_output_area();
         this.append_text(json.text, toinsert, "output_stream "+subclass);
         this.element.find('div.output').append(toinsert);
     };
 
 
     CodeCell.prototype.append_display_data = function (json, dynamic) {
         var toinsert = this.create_output_area();
         this.append_mime_type(json, toinsert, dynamic);
         this.element.find('div.output').append(toinsert);
         // If we just output latex, typeset it.
         if ( (json.latex !== undefined) || (json.html !== undefined) ) {
             this.typeset();
         };
     };
 
 
     CodeCell.prototype.append_mime_type = function (json, element, dynamic) {
         if (json.javascript !== undefined && dynamic) {
             this.append_javascript(json.javascript, element, dynamic);
         } else if (json.html !== undefined) {
             this.append_html(json.html, element);
         } else if (json.latex !== undefined) {
             this.append_latex(json.latex, element);
         } else if (json.svg !== undefined) {
             this.append_svg(json.svg, element);
         } else if (json.png !== undefined) {
             this.append_png(json.png, element);
         } else if (json.jpeg !== undefined) {
             this.append_jpeg(json.jpeg, element);
         } else if (json.text !== undefined) {
             this.append_text(json.text, element);
         };
     };
 
 
     CodeCell.prototype.append_html = function (html, element) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_html rendered_html");
         toinsert.append(html);
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_javascript = function (js, container) {
         // We just eval the JS code, element appears in the local scope.
         var element = $("<div/>").addClass("box_flex1 output_subarea");
         container.append(element);
         // Div for js shouldn't be drawn, as it will add empty height to the area.
         container.hide();
         // If the Javascript appends content to `element` that should be drawn, then
         // it must also call `container.show()`.
         eval(js);
     }
 
 
     CodeCell.prototype.append_text = function (data, element, extra_class) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_text");
         // escape ANSI & HTML specials in plaintext:
         data = utils.fixConsole(data);
         if (extra_class){
             toinsert.addClass(extra_class);
         }
         toinsert.append($("<pre/>").html(data));
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_svg = function (svg, element) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_svg");
         toinsert.append(svg);
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_png = function (png, element) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_png");
         toinsert.append($("<img/>").attr('src','data:image/png;base64,'+png));
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_jpeg = function (jpeg, element) {
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_jpeg");
         toinsert.append($("<img/>").attr('src','data:image/jpeg;base64,'+jpeg));
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.append_latex = function (latex, element) {
         // This method cannot do the typesetting because the latex first has to
         // be on the page.
         var toinsert = $("<div/>").addClass("box_flex1 output_subarea output_latex");
         toinsert.append(latex);
         element.append(toinsert);
     };
 
 
     CodeCell.prototype.clear_output = function (stdout, stderr, other) {
         var that = this;
         if (this.clear_out_timeout != null){
             // fire previous pending clear *immediately*
             clearTimeout(this.clear_out_timeout);
             this.clear_out_timeout = null;
             this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
         }
         // store flags for flushing the timeout
         this._clear_stdout = stdout;
         this._clear_stderr = stderr;
         this._clear_other = other;
         this.clear_out_timeout = setTimeout(function(){
             // really clear timeout only after a short delay
             // this reduces flicker in 'clear_output; print' cases
             that.clear_out_timeout = null;
             that._clear_stdout = that._clear_stderr = that._clear_other = null;
             that.clear_output_callback(stdout, stderr, other);
         }, 500
         );
     };
     
     CodeCell.prototype.clear_output_callback = function (stdout, stderr, other) {
         var output_div = this.element.find("div.output");
         
         if (stdout && stderr && other){
             // clear all, no need for logic
             output_div.html("");
             this.outputs = [];
             return;
         }
         // remove html output
         // each output_subarea that has an identifying class is in an output_area
         // which is the element to be removed.
         if (stdout){
             output_div.find("div.output_stdout").parent().remove();
         }
         if (stderr){
             output_div.find("div.output_stderr").parent().remove();
         }
         if (other){
             output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove();
         }
         
         // remove cleared outputs from JSON list:
         for (var i = this.outputs.length - 1; i >= 0; i--){
             var out = this.outputs[i];
             var output_type = out.output_type;
             if (output_type == "display_data" && other){
                 this.outputs.splice(i,1);
             }else if (output_type == "stream"){
                 if (stdout && out.stream == "stdout"){
                     this.outputs.splice(i,1);
                 }else if (stderr && out.stream == "stderr"){
                     this.outputs.splice(i,1);
                 }
             }
         }
     };
 
 
     CodeCell.prototype.clear_input = function () {
         this.code_mirror.setValue('');
     };
     
     CodeCell.prototype.flush_clear_timeout = function() {
         var output_div = this.element.find('div.output');
         if (this.clear_out_timeout){
             clearTimeout(this.clear_out_timeout);
             this.clear_out_timeout = null;
             this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
         };
     }
 
 
     CodeCell.prototype.collapse = function () {
         if (!this.collapsed) {
             this.element.find('div.output').hide();
             this.collapsed = true;
         };
     };
 
 
     CodeCell.prototype.expand = function () {
         if (this.collapsed) {
             this.element.find('div.output').show();
             this.collapsed = false;
         };
     };
 
 
     CodeCell.prototype.toggle_output = function () {
         if (this.collapsed) {
             this.expand();
         } else {
             this.collapse();
         };
     };
 
     CodeCell.prototype.set_input_prompt = function (number) {
         this.input_prompt_number = number;
         var ns = number || "&nbsp;";
         this.element.find('div.input_prompt').html('In&nbsp;[' + ns + ']:');
     };
 
 
     CodeCell.prototype.get_text = function () {
         return this.code_mirror.getValue();
     };
 
 
     CodeCell.prototype.set_text = function (code) {
         return this.code_mirror.setValue(code);
     };
 
 
     CodeCell.prototype.at_top = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === 0) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.at_bottom = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === (this.code_mirror.lineCount()-1)) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.fromJSON = function (data) {
         if (data.cell_type === 'code') {
             if (data.input !== undefined) {
                 this.set_text(data.input);
             }
             if (data.prompt_number !== undefined) {
                 this.set_input_prompt(data.prompt_number);
             } else {
                 this.set_input_prompt();
             };
             var len = data.outputs.length;
             for (var i=0; i<len; i++) {
                 // append with dynamic=false.
                 this.append_output(data.outputs[i], false);
             };
             if (data.collapsed !== undefined) {
                 if (data.collapsed) {
                     this.collapse();
                 } else {
                     this.expand();
                 };
             };
         };
     };
 
 
     CodeCell.prototype.toJSON = function () {
         var data = {};
         data.input = this.get_text();
         data.cell_type = 'code';
         if (this.input_prompt_number) {
             data.prompt_number = this.input_prompt_number;
         };
         var outputs = [];
         var len = this.outputs.length;
         for (var i=0; i<len; i++) {
             outputs[i] = this.outputs[i];
         };
         data.outputs = outputs;
         data.language = 'python';
         data.collapsed = this.collapsed;
         return data;
     };
 
 
     IPython.CodeCell = CodeCell;
 
     return IPython;
 }(IPython));

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

@@ -1,205 +1,301
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Tooltip
 //============================================================================
 
 // Todo : 
 // use codemirror highlight example to 
 // highlight the introspection request and introspect on mouse hove ...
 //
 //
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var Tooltip = function (notebook) {
         this.tooltip = $('#tooltip');
         var that = this;
         this._hidden = true;
 
+        // variable for consecutive call
+        this._old_cell = null ;
+        this._old_request = null ;
+        this._consecutive_conter = 0;
+
+        // 'sticky ?'
+        this._sticky = false;
+
         // contain the button in the upper right corner
         this.buttons = $('<div/>')
               .addClass('tooltipbuttons');
 
         // will contain the docstring 
         this.text    = $('<div/>')
           .addClass('tooltiptext')
           .addClass('smalltooltip');
         
         var tooltip = this.tooltip;
-        var text = this.text;
 
 	// build the buttons menu on the upper right
         
 	// expand the tooltip to see more
         var expandlink=$('<a/>').attr('href',"#")
               .addClass("ui-corner-all") //rounded corner
               .attr('role',"button")
               .attr('id','expanbutton')
-              .click(function(){
-                  text.removeClass('smalltooltip');
-                  text.addClass('bigtooltip');
-                  $('#expanbutton').addClass('hidden');
-                  that._cmfocus();
-              })
+              .click(function(){that.expand()})
             .append(
         $('<span/>').text('Expand')
             .addClass('ui-icon')
             .addClass('ui-icon-plus')
         );
 
         // open in pager
         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(that.name+"?");
-            IPython.notebook.msg_cell_map[msg_id] = IPython.notebook.get_selected_cell().cell_id;
-            that.remove_and_cancel_tooltip();
-            that._cmfocus();
+            that.showInPager();
         });
 
         // close the tooltip
         var closelink=$('<a/>').attr('href',"#");
             closelink.attr('role',"button");
             closelink.addClass('ui-button');
         var closespan=$('<span/>').text('Close');
             closespan.addClass('ui-icon');
             closespan.addClass('ui-icon-close');
         closelink.append(closespan);
         closelink.click(function(){
         that.hide();
             });
         
         //construct the tooltip
         // add in the reverse order you want them to appear
         this.buttons.append(closelink);
         this.buttons.append(expandlink);
         this.buttons.append(morelink);
 
         // we need a phony element to make the small arrow
         // of the tooltip in css
         // we could try to move the arrow later
         this.arrow = $('<div/>').addClass('pretooltiparrow');
         this.tooltip.append(this.buttons);
         this.tooltip.append(this.arrow);
         this.tooltip.append(this.text);
     };
 
+    Tooltip.prototype.showInPager = function()
+    {
+            var msg_id = IPython.notebook.kernel.execute(that.name+"?");
+            IPython.notebook.msg_cell_map[msg_id] = IPython.notebook.get_selected_cell().cell_id;
+            this.remove_and_cancel_tooltip();
+            this._cmfocus();
+    }
+
+
+    Tooltip.prototype.expand = function(){
+        this.text.removeClass('smalltooltip');
+        this.text.addClass('bigtooltip');
+        $('#expanbutton').addClass('hidden');
+        this._cmfocus();
+    }
+
     // deal with all the logic of hiding the tooltip
     // and reset it's status
     Tooltip.prototype.hide = function()
     {
          this.tooltip.addClass('hide');
          $('#expanbutton').removeClass('hidden');
          this.text.removeClass('bigtooltip');
          this.text.addClass('smalltooltip');
          // keep scroll top to be sure to always see the first line
          this.text.scrollTop(0);
          this._hidden = true;
     }
 
     //TODO, try to diminish the number of parameters.
     Tooltip.prototype.request_tooltip_after_time = function (pre_cursor,time){
     };
 
 
-    Tooltip.prototype.remove_and_cancel_tooltip = function() {
+    Tooltip.prototype.remove_and_cancel_tooltip = function(force) {
         // note that we don't handle closing directly inside the calltip
         // as in the completer, because it is not focusable, so won't
         // get the event.
+        if(this._sticky == false || force == true)
+        {
         this.hide();
+        }
+        this.cancel_pending();
+        this._old_cell = null ;
+        this._old_request = null ;
+        this._consecutive_conter = 0;
+    }
+
+    Tooltip.prototype.cancel_pending = function(){
         if (this.tooltip_timeout != null){
             clearTimeout(this.tooltip_timeout);
             this.tooltip_timeout = null;
         }
     }
     
     Tooltip.prototype.pending = function(cell,text)
     {
         var that = this;
-        this.tooltip_timeout = setTimeout(function(){that.request(cell, text)} , IPython.notebook.time_before_tooltip);
+        this.tooltip_timeout = setTimeout(function(){that.request(cell)} , IPython.notebook.time_before_tooltip);
+    }
+    Tooltip.prototype.request = function(cell)
+    {
+        this.cancel_pending();
+        var editor = cell.code_mirror;
+        this.code_mirror = editor;
+        var cursor = editor.getCursor();
+        var text = editor.getRange({line:cursor.line,ch:0},cursor).trim();
+
+        if( this._old_cell == cell && this._old_request == text && this._hidden == false)
+        {
+            this._consecutive_conter = this._consecutive_conter +1;
+        } else {
+            this._old_cell = cell ;
+            this._old_request = text ;
+            this._consecutive_conter =0;
+            this.cancel_stick();
+        }
+
+        if( this._consecutive_conter == 1 )
+        {
+            this.expand()
+            return;
+        }
+        else if( this._consecutive_conter ==  2)
+        {
+            this.stick();
+            return;
     }
-    Tooltip.prototype.request = function(cell,text)
+        else if( this._consecutive_conter ==  3)
     {
+            console.log('should open in pager');
+            this._old_cell = null ;
+            this._cancel_stick 
+            this._old_request = null ;
+            this._consecutive_conter = 0;
+            this.showInPager();
+            this._cmfocus();
+            return;
+        }
+        else if( this._consecutive_conter ==  4)
+        {
+
+        }
+
+        if (text === "" || text === "(" ) {
+            return;
+            // don't do anything if line beggin with '(' or is empty
+        }
             IPython.notebook.request_tool_tip(cell, text);
     }
+    Tooltip.prototype.cancel_stick = function()
+    {
+            clearTimeout(this._stick_timeout);
+            this._sticky = false;
+    }
+
+    Tooltip.prototype.stick = function() 
+    {
+        console.log('tooltip will stick for at least 10 sec');
+        var that = this; 
+        this._sticky = true;
+        this._stick_timeout = setTimeout( function(){
+            that._sticky = false;
+            console.log('tooltip will not stick anymore');
+            }, 10*1000
+        );
+
+
+    }
 
     Tooltip.prototype.show = function(reply, codecell)
     {
         // move the bubble if it is not hidden
         // otherwise fade it
         var editor = codecell.code_mirror;
         this.name = reply.name;
         this.code_mirror = editor;
+
+        // do some math to have the tooltip arrow on more or less on left or right
+        // width of the editor
+        var w= $(this.code_mirror.getScrollerElement()).width();
+        // ofset of the editor
+        var o= $(this.code_mirror.getScrollerElement()).offset();
         var pos = editor.cursorCoords();
         var xinit = pos.x;
-        var xinter = xinit/1000*600;
+        var xinter = o.left + (xinit-o.left)/w*(w-450);
         var posarrowleft = xinit - xinter;
         
 
         if( this._hidden == false)
         {
             this.tooltip.animate({'left' : xinter-30+'px','top' :(pos.yBot+10)+'px'});
         } else 
         {
             this.tooltip.css({'left' : xinter-30+'px'});
             this.tooltip.css({'top' :(pos.yBot+10)+'px'});
         }
         this.arrow.animate({'left' : posarrowleft+'px'});
         this.tooltip.removeClass('hidden')
         this.tooltip.removeClass('hide');
         this._hidden = false;
 
         // build docstring
         defstring = reply.call_def;
         if (defstring == null) { defstring = reply.init_definition; }
         if (defstring == null) { defstring = reply.definition; }
 
         docstring = reply.call_docstring;
         if (docstring == null) { docstring = reply.init_docstring; }
         if (docstring == null) { docstring = reply.docstring; }
         if (docstring == null) { docstring = "<empty docstring>"; }
 
         this.text.children().remove();
 
         var pre=$('<pre/>').html(utils.fixConsole(docstring));
         if(defstring){
             var defstring_html = $('<pre/>').html(utils.fixConsole(defstring));
             this.text.append(defstring_html);
         }
         this.text.append(pre);
         // keep scroll top to be sure to always see the first line
         this.text.scrollTop(0);
 
 
     }
 
-    Tooltip.prototype.showInPager = function(){
-        var msg_id = IPython.notebook.kernel.execute(name+"?");
+    Tooltip.prototype.showInPager = function(text){
+        var msg_id = IPython.notebook.kernel.execute(this.name+"?");
         IPython.notebook.msg_cell_map[msg_id] = IPython.notebook.get_selected_cell().cell_id;
-        that.remove_and_cancel_tooltip();
-        setTimeout(function(){that.code_mirror.focus();}, 50);
+        this.remove_and_cancel_tooltip(true);
+        this._cmfocus();
     }
 
     Tooltip.prototype._cmfocus = function()
     {
         var cm = this.code_mirror;
         setTimeout(function(){cm.focus();}, 50);
     }
 
 
     IPython.Tooltip = Tooltip;
 
     return IPython;
 }(IPython));

IPython/frontend/html/notebook/templates/notebook.html

@@ -1,242 +1,242
 {% extends page.html %}
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML" charset="utf-8"></script>
 {% end %}
 <script type="text/javascript">
 // MathJax disabled, set as null to distingish from *missing* MathJax,
 // where it will be undefined, and should prompt a dialog later.
 window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("codemirror/lib/codemirror.css") }}">
 <link rel="stylesheet" href="{{ static_url("codemirror/theme/ipython.css") }}">
 
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/tooltip.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
 
 {% end %}
 
 
 {% block params %}
 
 data-project={{project}}
 data-base-project-url={{base_project_url}}
 data-base-kernel-url={{base_kernel_url}}
 data-read-only={{read_only and not logged_in}}
 data-notebook-id={{notebook_id}}
 
 {% end %}
 
 
 {% block header %}
 
 <span id="save_widget">
     <span id="notebook_name"></span>
     <span id="save_status"></span>
 </span>
 
 {% end %}
 
 
 {% block site %}
 
 <div id="menubar_container">
 <div id="menubar">
     <ul id="menus">
         <li><a href="#">File</a>
             <ul>
                 <li id="new_notebook"><a href="#">New</a></li>
                 <li id="open_notebook"><a href="#">Open...</a></li>
                 <hr/>
                 <li id="copy_notebook"><a href="#">Make a Copy...</a></li>
                 <li id="rename_notebook"><a href="#">Rename...</a></li>
                 <li id="save_notebook"><a href="#">Save</a></li>
                 <hr/>
                 <li><a href="#">Download as</a>
                     <ul>
                         <li id="download_ipynb"><a href="#">IPython (.ipynb)</a></li>
                         <li id="download_py"><a href="#">Python (.py)</a></li>
                     </ul>
                 </li>
                 <hr/>
                 <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>
                 <hr/>
                 <li id="kill_and_exit"><a href="#" >Close and halt</a></li>
             </ul>
         </li>
         <li><a href="#">Edit</a>
             <ul>
                 <li id="cut_cell"><a href="#">Cut Cell</a></li>
                 <li id="copy_cell"><a href="#">Copy Cell</a></li>
                 <li id="paste_cell" class="ui-state-disabled"><a href="#">Paste Cell</a></li>
                 <li id="paste_cell_above" class="ui-state-disabled"><a href="#">Paste Cell Above</a></li>
                 <li id="paste_cell_below" class="ui-state-disabled"><a href="#">Paste Cell Below</a></li>
                 <li id="delete_cell"><a href="#">Delete</a></li>
                 <hr/>
                 <li id="split_cell"><a href="#">Split Cell</a></li>
                 <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                 <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                 <hr/>
                 <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                 <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                 <hr/>
                 <li id="select_previous"><a href="#">Select Previous Cell</a></li>
                 <li id="select_next"><a href="#">Select Next Cell</a></li>
             </ul>
         </li>
         <li><a href="#">View</a>
             <ul>
                 <li id="toggle_header"><a href="#">Toggle Header</a></li>
                 <li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
             </ul>
         </li>
         <li><a href="#">Insert</a>
             <ul>
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>
                 <li id="insert_cell_below"><a href="#">Insert Cell Below</a></li>
             </ul>
         </li>
         <li><a href="#">Cell</a>
             <ul>
                 <li id="run_cell"><a href="#">Run</a></li>
                 <li id="run_cell_in_place"><a href="#">Run in Place</a></li>
                 <li id="run_all_cells"><a href="#">Run All</a></li>
                 <hr/>
                 <li id="to_code"><a href="#">Code</a></li>
                 <li id="to_markdown"><a href="#">Markdown </a></li>
                 <li id="to_raw"><a href="#">Raw Text</a></li>
                 <li id="to_heading1"><a href="#">Heading 1</a></li>
                 <li id="to_heading2"><a href="#">Heading 2</a></li>
                 <li id="to_heading3"><a href="#">Heading 3</a></li>
                 <li id="to_heading4"><a href="#">Heading 4</a></li>
                 <li id="to_heading5"><a href="#">Heading 5</a></li>
                 <li id="to_heading6"><a href="#">Heading 6</a></li>
                 <hr/>
                 <li id="toggle_output"><a href="#">Toggle Output</a></li>
                 <li id="clear_all_output"><a href="#">Clear All Output</a></li>
             </ul>
         </li>
         <li><a href="#">Kernel</a>
             <ul>
                 <li id="int_kernel"><a href="#">Interrupt</a></li>
                 <li id="restart_kernel"><a href="#">Restart</a></li>
             </ul>
         </li>
         <li><a href="#">Help</a>
             <ul>
                 <li><a href="http://ipython.org/documentation.html" target="_blank">IPython Help</a></li>
                 <li><a href="http://ipython.org/ipython-doc/stable/interactive/htmlnotebook.html" target="_blank">Notebook Help</a></li>
                 <li id="keyboard_shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                 <hr/>
                 <li><a href="http://docs.python.org" target="_blank">Python</a></li>
                 <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></li>
                 <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></li>
                 <li><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></li>
                 <li><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></li>
             </ul>
         </li>
     </ul>
 
 </div>
 <div id="notification"></div>
 </div>
 
 
 <div id="toolbar">
 
     <span>
         <button id="save_b">Save</button>
     </span>
     <span id="cut_copy_paste">
         <button id="cut_b" title="Cut Cell">Cut Cell</button>
         <button id="copy_b" title="Copy Cell">Copy Cell</button>
         <button id="paste_b" title="Paste Cell">Paste Cell</button>
     </span>
     <span id="move_up_down">
         <button id="move_up_b" title="Move Cell Up">Move Cell Up</button>
         <button id="move_down_b" title="Move Cell Down">Move Down</button>
     </span>
     <span id="insert_above_below">
         <button id="insert_above_b" title="Insert Cell Above">Insert Cell Above</button>
         <button id="insert_below_b" title="Insert Cell Below">Insert Cell Below</button>
     </span>
     <span id="run_int">
         <button id="run_b" title="Run Cell">Run Cell</button>
         <button id="interrupt_b" title="Interrupt">Interrupt</button>
     </span>
     <span>
         <select id="cell_type">
              <option value="code">Code</option>
              <option value="markdown">Markdown</option>
              <option value="raw">Raw Text</option>
              <option value="heading1">Heading 1</option>
              <option value="heading2">Heading 2</option>
              <option value="heading3">Heading 3</option>
              <option value="heading4">Heading 4</option>
              <option value="heading5">Heading 5</option>
              <option value="heading6">Heading 6</option>
         </select>
     </span>
 
 </div>
 
 <div id="main_app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager"></div>
     </div>
 
 </div>
-<div id='tooltip' class='tooltip ui-corner-all hidden'></div>
+<div id='tooltip' class='tooltip ui-corner-all hidden hide'></div>
 
 
 {% end %}
 
 
 {% block script %}
 
 <script src="{{ static_url("codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/python/python.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/javascript/javascript.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/css/css.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/rst/rst.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/markdown/markdown.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("pagedown/Markdown.Converter.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("prettify/prettify.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/initmathjax.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/context-hint.js") }} charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/tooltip.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
 <script src="{{ static_url("js/context-hint.js") }} charset="utf-8"></script>
 <script src="{{ static_url("codemirror/lib/util/simple-hint.js") }} charset="utf-8"></script>
 
 {% end %}