fix tooltip location

put it inside `#site`, so it scrolls with the notebook

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

@@ -1,321 +1,324
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
 ], function(IPython, $, utils) {
     "use strict";
 
     // tooltip constructor
     var Tooltip = function (events) {
         var that = this;
         this.events = events;
         this.time_before_tooltip = 1200;
 
         // handle to html
         this.tooltip = $('#tooltip');
         this._hidden = true;
 
         // variable for consecutive call
         this._old_cell = null;
         this._old_request = null;
         this._consecutive_counter = 0;
 
         // 'sticky ?'
         this._sticky = false;
 
         // display tooltip if the docstring is empty?
         this._hide_if_no_docstring = 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');
 
         // 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').attr('title', 'Grow the tooltip vertically (press shift-tab twice)').click(function () {
             that.expand();
             event.preventDefault();
         }).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').attr('title', 'show the current docstring in pager (press shift-tab 4 times)');
         var morespan = $('<span/>').text('Open in Pager').addClass('ui-icon').addClass('ui-icon-arrowstop-l-n');
         morelink.append(morespan);
         morelink.click(function () {
             that.showInPager(that._old_cell);
             event.preventDefault();
         });
 
         // close the tooltip
         var closelink = $('<a/>').attr('href', "#").attr('role', "button").addClass('ui-button');
         var closespan = $('<span/>').text('Close').addClass('ui-icon').addClass('ui-icon-close');
         closelink.append(closespan);
         closelink.click(function () {
             that.remove_and_cancel_tooltip(true);
             event.preventDefault();
         });
 
         this._clocklink = $('<a/>').attr('href', "#");
         this._clocklink.attr('role', "button");
         this._clocklink.addClass('ui-button');
         this._clocklink.attr('title', 'Tootip is not dismissed while typing for 10 seconds');
         var clockspan = $('<span/>').text('Close');
         clockspan.addClass('ui-icon');
         clockspan.addClass('ui-icon-clock');
         this._clocklink.append(clockspan);
         this._clocklink.click(function () {
             that.cancel_stick();
             event.preventDefault();
         });
 
 
 
 
         //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);
         this.buttons.append(this._clocklink);
         this._clocklink.hide();
 
 
         // we need a phony element to make the small arrow
         // of the tooltip in css
         // we will move the arrow later
         this.arrow = $('<div/>').addClass('pretooltiparrow');
         this.tooltip.append(this.buttons);
         this.tooltip.append(this.arrow);
         this.tooltip.append(this.text);
 
         // function that will be called if you press tab 1, 2, 3... times in a row
         this.tabs_functions = [function (cell, text, cursor) {
             that._request_tooltip(cell, text, cursor);
         }, function () {
             that.expand();
         }, function () {
             that.stick();
         }, function (cell) {
             that.cancel_stick();
             that.showInPager(cell);
         }];
         // call after all the tabs function above have bee call to clean their effects
         // if necessary
         this.reset_tabs_function = function (cell, text) {
             this._old_cell = (cell) ? cell : null;
             this._old_request = (text) ? text : null;
             this._consecutive_counter = 0;
         };
     };
 
     Tooltip.prototype.is_visible = function () {
         return !this._hidden;
     };
 
     Tooltip.prototype.showInPager = function (cell) {
         /**
          * reexecute last call in pager by appending ? to show back in pager
          */
         this.events.trigger('open_with_text.Pager', this._reply.content);
         this.remove_and_cancel_tooltip();
     };
 
     // grow the tooltip verticaly
     Tooltip.prototype.expand = function () {
         this.text.removeClass('smalltooltip');
         this.text.addClass('bigtooltip');
         $('#expanbutton').hide('slow');
     };
 
     // deal with all the logic of hiding the tooltip
     // and reset it's status
     Tooltip.prototype._hide = function () {
         this._hidden = true;
         this.tooltip.fadeOut('fast');
         $('#expanbutton').show('slow');
         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.code_mirror = null;
     };
 
     // return true on successfully removing a visible tooltip; otherwise return
     // false.
     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.
          */
         this.cancel_pending();
         if (!this._hidden) {
           if (force || !this._sticky) {
               this.cancel_stick();
               this._hide();
           }
           this.reset_tabs_function();
           return true;
         } else {
           return false;
         }
     };
 
     // cancel autocall done after '(' for example.
     Tooltip.prototype.cancel_pending = function () {
         if (this._tooltip_timeout !== null) {
             clearTimeout(this._tooltip_timeout);
             this._tooltip_timeout = null;
         }
     };
 
     // will trigger tooltip after timeout
     Tooltip.prototype.pending = function (cell, hide_if_no_docstring) {
         var that = this;
         this._tooltip_timeout = setTimeout(function () {
             that.request(cell, hide_if_no_docstring);
         }, that.time_before_tooltip);
     };
 
     // easy access for julia monkey patching.
     Tooltip.last_token_re = /[a-z_][0-9a-z._]*$/gi;
 
     Tooltip.prototype._request_tooltip = function (cell, text, cursor_pos) {
         var callbacks = $.proxy(this._show, this);
         var msg_id = cell.kernel.inspect(text, cursor_pos, callbacks);
     };
 
     // make an immediate completion request
     Tooltip.prototype.request = function (cell, hide_if_no_docstring) {
         /**
          * request(codecell)
          * Deal with extracting the text from the cell and counting
          * call in a row
          */
         this.cancel_pending();
         var editor = cell.code_mirror;
         var cursor = editor.getCursor();
         var cursor_pos = utils.to_absolute_cursor_pos(editor, cursor);
         var text = cell.get_text();
 
         this._hide_if_no_docstring = hide_if_no_docstring;
 
         if(editor.somethingSelected()){
             // get only the most recent selection.
             text = editor.getSelection();
         }
 
         // need a permanent handle to code_mirror for future auto recall
         this.code_mirror = editor;
 
         // now we treat the different number of keypress
         // first if same cell, same text, increment counter by 1
         if (this._old_cell == cell && this._old_request == text && this._hidden === false) {
             this._consecutive_counter++;
         } else {
             // else reset
             this.cancel_stick();
             this.reset_tabs_function (cell, text);
         }
 
         this.tabs_functions[this._consecutive_counter](cell, text, cursor_pos);
 
         // then if we are at the end of list function, reset
         if (this._consecutive_counter == this.tabs_functions.length) {
             this.reset_tabs_function (cell, text, cursor);
         }
 
         return;
     };
 
     // cancel the option of having the tooltip to stick
     Tooltip.prototype.cancel_stick = function () {
         clearTimeout(this._stick_timeout);
         this._stick_timeout = null;
         this._clocklink.hide('slow');
         this._sticky = false;
     };
 
     // put the tooltip in a sicky state for 10 seconds
     // it won't be removed by remove_and_cancell() unless you called with
     // the first parameter set to true.
     // remove_and_cancell_tooltip(true)
     Tooltip.prototype.stick = function (time) {
         time = (time !== undefined) ? time : 10;
         var that = this;
         this._sticky = true;
         this._clocklink.show('slow');
         this._stick_timeout = setTimeout(function () {
             that._sticky = false;
             that._clocklink.hide('slow');
         }, time * 1000);
     };
 
     // should be called with the kernel reply to actually show the tooltip
     Tooltip.prototype._show = function (reply) {
         /**
          * move the bubble if it is not hidden
          * otherwise fade it
          */
         this._reply = reply;
         var content = reply.content;
         if (!content.found) {
             // object not found, nothing to show
             return;
         }
         this.name = content.name;
 
         // 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();
 
         // whatever anchor/head order but arrow at mid x selection
         var anchor = this.code_mirror.cursorCoords(false);
         var head  = this.code_mirror.cursorCoords(true);
         var xinit = (head.left+anchor.left)/2;
         var xinter = o.left + (xinit - o.left) / w * (w - 450);
         var posarrowleft = xinit - xinter;
 
+        var left = xinter - 30 + 'px';
+        var top = (head.bottom + 10 - $("#header").height()) + 'px';
+
         if (this._hidden === false) {
             this.tooltip.animate({
-                'left': xinter - 30 + 'px',
-                'top': (head.bottom + 10) + 'px'
+                left: left,
+                top: top
             });
         } else {
             this.tooltip.css({
-                'left': xinter - 30 + 'px'
+                left: left
             });
             this.tooltip.css({
-                'top': (head.bottom + 10) + 'px'
+                top: top
             });
         }
         this.arrow.animate({
             'left': posarrowleft + 'px'
         });
         
         this._hidden = false;
         this.tooltip.fadeIn('fast');
         this.text.children().remove();
         
         // This should support rich data types, but only text/plain for now
         // Any HTML within the docstring is escaped by the fixConsole() method.
         var pre = $('<pre/>').html(utils.fixConsole(content.data['text/plain']));
         this.text.append(pre);
         // keep scroll top to be sure to always see the first line
         this.text.scrollTop(0);
     };
 
     // Backwards compatibility.
     IPython.Tooltip = Tooltip;
 
     return {'Tooltip': Tooltip};
 });

IPython/html/templates/notebook.html

@@ -1,321 +1,321
 {% extends "page.html" %}
 
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML-full&delayStartupUntil=configured" charset="utf-8"></script>
 {% endif %}
 <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("components/bootstrap-tour/build/css/bootstrap-tour.min.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("components/codemirror/lib/codemirror.css") }}">
 
 {{super()}}
 
 <link rel="stylesheet" href="{{ static_url("notebook/css/override.css") }}" type="text/css" />
 <link rel="stylesheet" href=""  id='kernel-css'                             type="text/css" />
 
 {% endblock %}
 
 {% block bodyclasses %}notebook_app {{super()}}{% endblock %}
 
 {% block params %}
 
 data-project="{{project}}"
 data-base-url="{{base_url}}"
 data-ws-url="{{ws_url}}"
 data-notebook-name="{{notebook_name}}"
 data-notebook-path="{{notebook_path}}"
 
 {% endblock %}
 
 
 {% block headercontainer %}
 
 
 <span id="save_widget" class="pull-left save_widget">
     <span id="notebook_name" class="filename"></span>
     <span class="checkpoint_status"></span>
     <span class="autosave_status"></span>
 </span>
 
 <span id="kernel_logo_widget">
   <img class="current_kernel_logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
 </span>
 
 {% endblock headercontainer %}
 
 {% block header %}
 <div id="menubar-container" class="container">
 <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
         <div class="container-fluid">
             <button type="button" class="btn btn-default navbar-btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
               <i class="fa fa-bars"></i>
               <span class="navbar-text">Menu</span>
             </button>
             <p id="kernel_indicator" class="navbar-text indicator_area">
               <span class="kernel_indicator_name">Kernel</span>
               <i id="kernel_indicator_icon"></i>
             </p>
             <i id="modal_indicator" class="navbar-text"></i>
             <span id="notification_area"></span>
             <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
                     <ul id="file_menu" class="dropdown-menu">
                         <li id="new_notebook" class="dropdown-submenu">
                             <a href="#">New Notebook</a>
                             <ul class="dropdown-menu" id="menu-new-notebook-submenu"></ul>
                         </li>
                         <li id="open_notebook"
                             title="Opens a new window with the Dashboard view">
                             <a href="#">Open...</a></li>
                         <!-- <hr/> -->
                         <li class="divider"></li>
                         <li id="copy_notebook"
                             title="Open a copy of this notebook's contents and start a new kernel">
                             <a href="#">Make a Copy...</a></li>
                         <li id="rename_notebook"><a href="#">Rename...</a></li>
                         <li id="save_checkpoint"><a href="#">Save and Checkpoint</a></li>
                         <!-- <hr/> -->
                         <li class="divider"></li>
                         <li id="restore_checkpoint" class="dropdown-submenu"><a href="#">Revert to Checkpoint</a>
                           <ul class="dropdown-menu">
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                             <li><a href="#"></a></li>
                           </ul>
                         </li>
                         <li class="divider"></li>
                         <li id="print_preview"><a href="#">Print Preview</a></li>
                         <li class="dropdown-submenu"><a href="#">Download as</a>
                             <ul class="dropdown-menu">
                                 <li id="download_ipynb"><a href="#">IPython Notebook (.ipynb)</a></li>
                                 <li id="download_script"><a href="#">Script</a></li>
                                 <li id="download_html"><a href="#">HTML (.html)</a></li>
                                 <li id="download_rst"><a href="#">reST (.rst)</a></li>
                                 <li id="download_pdf"><a href="#">PDF (.pdf)</a></li>
                             </ul>
                         </li>
                         <li class="divider"></li>
                         <li id="trust_notebook"
                             title="Trust the output of this notebook">
                             <a href="#" >Trust Notebook</a></li>
                         <li class="divider"></li>
                         <li id="kill_and_exit"
                             title="Shutdown this notebook's kernel, and close this window">
                             <a href="#" >Close and halt</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
                     <ul id="edit_menu" class="dropdown-menu">
                         <li id="cut_cell"><a href="#">Cut Cell</a></li>
                         <li id="copy_cell"><a href="#">Copy Cell</a></li>
                         <li id="paste_cell_above" class="disabled"><a href="#">Paste Cell Above</a></li>
                         <li id="paste_cell_below" class="disabled"><a href="#">Paste Cell Below</a></li>
                         <li id="paste_cell_replace" class="disabled"><a href="#">Paste Cell &amp; Replace</a></li>
                         <li id="delete_cell"><a href="#">Delete Cell</a></li>
                         <li id="undelete_cell" class="disabled"><a href="#">Undo Delete Cell</a></li>
                         <li class="divider"></li>
                         <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>
                         <li class="divider"></li>
                         <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                         <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                         <li class="divider"></li>
                         <li id="edit_nb_metadata"><a href="#">Edit Notebook Metadata</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
                     <ul id="view_menu" class="dropdown-menu">
                         <li id="toggle_header"
                             title="Show/Hide the IPython Notebook logo and notebook title (above menu bar)">
                             <a href="#">Toggle Header</a></li>
                         <li id="toggle_toolbar"
                             title="Show/Hide the action icons (below menu bar)">
                             <a href="#">Toggle Toolbar</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Insert</a>
                     <ul id="insert_menu" class="dropdown-menu">
                         <li id="insert_cell_above"
                             title="Insert an empty Code cell above the currently active cell">
                             <a href="#">Insert Cell Above</a></li>
                         <li id="insert_cell_below"
                             title="Insert an empty Code cell below the currently active cell">
                             <a href="#">Insert Cell Below</a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cell</a>
                     <ul id="cell_menu" class="dropdown-menu">
                         <li id="run_cell" title="Run this cell, and move cursor to the next one">
                             <a href="#">Run</a></li>
                         <li id="run_cell_select_below" title="Run this cell, select below">
                             <a href="#">Run and Select Below</a></li>
                         <li id="run_cell_insert_below" title="Run this cell, insert below">
                             <a href="#">Run and Insert Below</a></li>
                         <li id="run_all_cells" title="Run all cells in the notebook">
                             <a href="#">Run All</a></li>
                         <li id="run_all_cells_above" title="Run all cells above (but not including) this cell">
                             <a href="#">Run All Above</a></li>
                         <li id="run_all_cells_below" title="Run this cell and all cells below it">
                             <a href="#">Run All Below</a></li>
                         <li class="divider"></li>
                         <li id="change_cell_type" class="dropdown-submenu"
                             title="All cells in the notebook have a cell type. By default, new cells are created as 'Code' cells">
                             <a href="#">Cell Type</a>
                             <ul class="dropdown-menu">
                               <li id="to_code"
                                   title="Contents will be sent to the kernel for execution, and output will display in the footer of cell">
                                   <a href="#">Code</a></li>
                               <li id="to_markdown"
                                   title="Contents will be rendered as HTML and serve as explanatory text">
                                   <a href="#">Markdown</a></li>
                               <li id="to_raw"
                                   title="Contents will pass through nbconvert unmodified">
                                   <a href="#">Raw NBConvert</a></li>
                             </ul>
                         </li>
                         <li class="divider"></li>
                         <li id="current_outputs" class="dropdown-submenu"><a href="#">Current Output</a>
                             <ul class="dropdown-menu">
                                 <li id="toggle_current_output"
                                     title="Hide/Show the output of the current cell">
                                     <a href="#">Toggle</a>
                                 </li>
                                 <li id="toggle_current_output_scroll"
                                     title="Scroll the output of the current cell">
                                     <a href="#">Toggle Scrolling</a>
                                 </li>
                                 <li id="clear_current_output"
                                     title="Clear the output of the current cell">
                                     <a href="#">Clear</a>
                                 </li>
                             </ul>
                         </li>
                         <li id="all_outputs" class="dropdown-submenu"><a href="#">All Output</a>
                             <ul class="dropdown-menu">
                                 <li id="toggle_all_output"
                                     title="Hide/Show the output of all cells">
                                     <a href="#">Toggle</a>
                                 </li>
                                 <li id="toggle_all_output_scroll"
                                     title="Scroll the output of all cells">
                                     <a href="#">Toggle Scrolling</a>
                                 </li>
                                 <li id="clear_all_output"
                                     title="Clear the output of all cells">
                                     <a href="#">Clear</a>
                                 </li>
                             </ul>
                         </li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Kernel</a>
                     <ul id="kernel_menu" class="dropdown-menu">
                         <li id="int_kernel"
                             title="Send KeyboardInterrupt (CTRL-C) to the Kernel">
                             <a href="#">Interrupt</a>
                         </li>
                         <li id="restart_kernel"
                             title="Restart the Kernel">
                             <a href="#">Restart</a>
                         </li>
                         <li id="reconnect_kernel"
                             title="Reconnect to the Kernel">
                             <a href="#">Reconnect</a>
                         </li>
                         <li class="divider"></li>
                         <li id="menu-change-kernel" class="dropdown-submenu">
                             <a href="#">Change kernel</a>
                             <ul class="dropdown-menu" id="menu-change-kernel-submenu"></ul>
                         </li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Help</a>
                     <ul  id="help_menu" class="dropdown-menu">
                         <li id="notebook_tour" title="A quick tour of the notebook user interface"><a href="#">User Interface Tour</a></li>
                         <li id="keyboard_shortcuts" title="Opens a tooltip with all keyboard shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                         <li class="divider"></li>
                         {% set
                             sections = (
                                 (
                                     ("http://nbviewer.ipython.org/github/ipython/ipython/blob/3.x/examples/Notebook/Index.ipynb", "Notebook Help", True),
                                     ("https://help.github.com/articles/markdown-basics/","Markdown",True),
                                 ),
                             )
                         %}
 
                         {% for helplinks in sections %}
                             {% for link in helplinks %}
                                 <li><a href="{{link[0]}}" {{'target="_blank" title="Opens in a new window"' if link[2]}}>
                                 {{'<i class="fa fa-external-link menu-icon pull-right"></i>' if link[2]}}
                                 {{link[1]}}
                                 </a></li>
                             {% endfor %}
                             {% if not loop.last %}
                                 <li class="divider"></li>
                             {% endif %}
                         {% endfor %}
                         <li class="divider"></li>
                         <li title="About IPython Notebook"><a id="notebook_about" href="#">About</a></li>
                     </ul>
                 </li>
               </ul>
             </div>
         </div>
     </div>
 </div>
 
 <div id="maintoolbar" class="navbar">
   <div class="toolbar-inner navbar-inner navbar-nobg">
     <div id="maintoolbar-container" class="container"></div>
   </div>
 </div>
 </div>
 
 <div class="lower-header-bar"></div>
 {% endblock header %}
 
 {% block site %}
 
 <div id="ipython-main-app">
     <div id="notebook_panel">
         <div id="notebook"></div>
     </div>
 </div>
 
+<div id='tooltip' class='ipython_tooltip' style='display:none'></div>
+
 {% endblock %}
 
 {% block after_site %}
 
 <div id="pager">
     <div id="pager-contents">
         <div id="pager-container" class="container"></div>
     </div>
     <div id='pager-button-area'></div>
 </div>
 
-<div id='tooltip' class='ipython_tooltip' style='display:none'></div>
-
 {% endblock %}
 
 {% block script %}
 {{super()}}
 <script type="text/javascript">
     sys_info = {{sys_info}};
 </script>
 
 <script src="{{ static_url("components/text-encoding/lib/encoding.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("notebook/js/main.js") }}" charset="utf-8"></script>
 
 {% endblock %}