rename show/hide methods to avoid jQuery conflict.

it seem that show and hide methods fron tooltip where collinding with
jquery, sometime blocking the notebook.

Move from css fadeIn/Out to jQuery fade In/Out, and replace
addRemoveClass by fadeIn/fadeOut

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

@@ -1,139 +1,133 b''
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 /** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
  * of chance of beeing generated from the ../less/[samename].less file, you can
  * try to get back the less file by reverting somme commit in history
  **/
 /*
  * We'll try to get something pretty, so we
- * have some strange ccs to have the scroll bar on
- * the left of the left with fix button on the top right of the tooltip
+ * have some strange css to have the scroll bar on
+ * the left with fix button on the top right of the tooltip
  */
 @-moz-keyframes fadeOut {
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
 }
 @-webkit-keyframes fadeOut {
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
 }
 @-moz-keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 @-webkit-keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 .tooltip a {
   float: right;
 }
 /*properties of tooltip after "expand"*/
 .bigtooltip {
   overflow: auto;
   height: 200px;
   -webkit-transition-property: height;
   -webkit-transition-duration: 1s;
   -moz-transition-property: height;
   -moz-transition-duration: 1s;
   transition-property: height;
   transition-duration: 1s;
 }
 /*properties of tooltip before "expand"*/
 .smalltooltip {
   -webkit-transition-property: height;
   -webkit-transition-duration: 1s;
   -moz-transition-property: height;
   -moz-transition-duration: 1s;
   transition-property: height;
   transition-duration: 1s;
   text-overflow: ellipsis;
   overflow: hidden;
   height: 80px;
 }
 .tooltipbuttons {
   position: absolute;
   padding-right: 15px;
   top: 0px;
   right: 0px;
 }
 .tooltiptext {
   /*avoid the button to overlap on some docstring*/
 
   padding-right: 30px;
 }
 .tooltip {
   max-width: 700px;
   border-radius: 4px;
   -moz-box-shadow: 0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow: 0px 6px 10px -1px #adadad;
   /*fade-in animation when inserted*/
 
   -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;
   overflow: visible;
   border: #bbbbbb 1px solid;
   outline: none;
   padding: 3px;
   margin: 0px;
   padding-left: 7px;
   font-family: monospace;
   min-height: 50px;
   position: absolute;
 }
 .pretooltiparrow {
   left: 0px;
   margin: 0px;
   top: -16px;
   width: 40px;
   height: 16px;
   overflow: hidden;
   position: absolute;
 }
 .pretooltiparrow:before {
   background-color: #f7f7f7;
   border: 1px #bbbbbb solid;
   z-index: 11;
   content: "";
   position: absolute;
   left: 15px;
   top: 10px;
   width: 25px;
   height: 25px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
 }
-.tooltip.hide {
-  -webkit-animation: fadeOut 800ms;
-  -moz-animation: fadeOut 800ms;
-  animation: fadeOut 800ms;
-  opacity: 0;
-}

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

@@ -1,361 +1,361 b''
 //----------------------------------------------------------------------------
 //  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
 //============================================================================
 //
 // you can set the autocall time by setting `IPython.tooltip.time_before_tooltip` in ms
 //
 // you can configure the differents action of pressing tab several times in a row by
 // setting/appending different fonction in the array
 // IPython.tooltip.tabs_functions
 //
 // eg :
 // IPython.tooltip.tabs_functions[4] = function (){console.log('this is the action of the 4th tab pressing')}
 //
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
 
     // tooltip constructor
     var Tooltip = function () {
             var that = this;
             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;
 
             // 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 tab 2 times)').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').attr('title', 'show the current docstring in pager (press 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();
             });
 
             // 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);
             });
 
             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();
             });
 
 
 
 
             //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) {
                 that._request_tooltip(cell, text);
                 IPython.notification_widget.set_message('tab again to expand pager', 2500);
             }, function () {
                 that.expand();
                 IPython.notification_widget.set_message('tab again to make pager sticky for 10s', 2500);
             }, function () {
                 that.stick();
                 IPython.notification_widget.set_message('tab again to open help in pager', 2500);
             }, function (cell) {
                 that.cancel_stick();
                 that.showInPager(cell);
                 that._cmfocus();
             }];
             // 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.showInPager = function (cell) {
         // reexecute last call in pager by appending ? to show back in pager
         var that = this;
         var empty = function () {};
         IPython.notebook.kernel.execute(
         that.name + '?', {
             'execute_reply': empty,
             'output': empty,
             'clear_output': empty,
             'cell': cell
         }, {
             'silent': false
         });
         this.remove_and_cancel_tooltip();
         this._cmfocus();
     }
 
     // grow the tooltip verticaly
     Tooltip.prototype.expand = function () {
         this.text.removeClass('smalltooltip');
         this.text.addClass('bigtooltip');
         $('#expanbutton').hide('slow');
         this._cmfocus();
     }
 
     // deal with all the logic of hiding the tooltip
     // and reset it's status
-    Tooltip.prototype.hide = function () {
-        this.tooltip.addClass('hide');
+    Tooltip.prototype._hide = function () {
+        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._hidden = true;
     }
 
     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._hide();
         }
         this.cancel_pending();
-        this.reset_tabs_function ();
+        this.reset_tabs_function();
+        this._cmfocus();
     }
 
     // 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) {
         var that = this;
         this._tooltip_timeout = setTimeout(function () {
             that.request(cell)
         }, that.time_before_tooltip);
     }
 
     Tooltip.prototype._request_tooltip = function (cell, func) {
         // use internally just to make the request to the kernel
         // Feel free to shorten this logic if you are better
         // than me in regEx
         // basicaly you shoul be able to get xxx.xxx.xxx from
         // something(range(10), kwarg=smth) ; xxx.xxx.xxx( firstarg, rand(234,23), kwarg1=2,
         // remove everything between matchin bracket (need to iterate)
         var matchBracket = /\([^\(\)]+\)/g;
         var endBracket = /\([^\(]*$/g;
         var oldfunc = func;
 
         func = func.replace(matchBracket, "");
         while (oldfunc != func) {
             oldfunc = func;
             func = func.replace(matchBracket, "");
         }
         // remove everything after last open bracket
         func = func.replace(endBracket, "");
 
         var re = /[a-z_][0-9a-z._]+$/gi; // casse insensitive
         var callbacks = {
-            'object_info_reply': $.proxy(this.show, this)
+            'object_info_reply': $.proxy(this._show, this)
         }
         var msg_id = IPython.notebook.kernel.object_info_request(re.exec(func), callbacks);
     }
 
     // make an imediate completion request
     Tooltip.prototype.request = function (cell) {
         // 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 text = editor.getRange({
             line: cursor.line,
             ch: 0
         }, cursor).trim();
 
         // need a permanent handel to codemirror 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);
         }
 
         // don't do anything if line beggin with '(' or is empty
         if (text === "" || text === "(") {
             return;
         }
 
         this.tabs_functions[this._consecutive_counter](cell, text);
 
         // 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);
 
         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) {
+    Tooltip.prototype._show = function (reply) {
         // move the bubble if it is not hidden
         // otherwise fade it
         this.name = reply.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();
         var pos = this.code_mirror.cursorCoords();
         var xinit = pos.x;
         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.tooltip.fadeIn('fast');
         this._hidden = false;
 
         // build docstring
         var defstring = reply.call_def;
         if (defstring == null) {
             defstring = reply.init_definition;
         }
         if (defstring == null) {
             defstring = reply.definition;
         }
 
         var 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);
     }
 
     // convenient funciton to have the correct codemirror back into focus
     Tooltip.prototype._cmfocus = function () {
         var cm = this.code_mirror;
         setTimeout(function () {
             cm.focus();
         }, 50);
     }
 
     IPython.Tooltip = Tooltip;
 
     return IPython;
 
 }(IPython));

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

@@ -1,167 +1,159 b''
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 /** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
  * of chance of beeing generated from the ../less/[samename].less file, you can
  * try to get back the less file by reverting somme commit in history
  **/
 
 /*
  * We'll try to get something pretty, so we
  * have some strange css to have the scroll bar on
- * the left of the left with fix button on the top right of the tooltip
+ * the left with fix button on the top right of the tooltip
  */
 
 // double slash comment are remove by less compilation
 // **
 // * Less mixins
 // **/
 
 // Four color of the background
 @c4 : rgb(247,247,247);
 @bordercolor : #BBB;
 @borderwidth : 1px;
 
 .dropshadow(){
  -moz-box-shadow:    0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow:         0px 6px 10px -1px #adadad;
 }
 
 // smoth height adaptation
 .smoothheight(@t:1s) {
     -webkit-transition-property: height;
     -webkit-transition-duration: 1s;
     -moz-transition-property: height;
     -moz-transition-duration: 1s;
     transition-property: height;
     transition-duration: 1s;
 }
 
 @-moz-keyframes fadeOut {
     from {opacity:1;}
     to {opacity:0;}
 }
 
 @-webkit-keyframes fadeOut {
     from {opacity:1;}
     to {opacity:0;}
 }
 
 //@keyframes fadeOut {
 //    from {opacity:1;}
 //    to {opacity:0;}
 //}
 
 @-moz-keyframes fadeIn {
     from {opacity:0;}
     to {opacity:1;}
 }
 
 @-webkit-keyframes fadeIn {
     from {opacity:0;}
     to {opacity:1;}
 }
 
 //@keyframes fadeIn {
 //    from {opacity:0;}
 //    to {opacity:1;}
 //}
 
 .tooltip a {
     float:right;
 }
 
 /*properties of tooltip after "expand"*/
 .bigtooltip {
     overflow: auto;
     height: 200px;
     .smoothheight();
 }
 
 /*properties of tooltip before "expand"*/
 .smalltooltip{
     .smoothheight();
     text-overflow: ellipsis;
     overflow: hidden;
     height:80px;
 }
 
 .tooltipbuttons
 {
     position: absolute;
     padding-right : 15px;
     top : 0px;
     right:0px;
 }
 
 .tooltiptext
 {   
     /*avoid the button to overlap on some docstring*/
     padding-right:30px
 }
 
 .tooltip {
     max-width:700px;
     border-radius: 4px;
     .dropshadow;
     /*fade-in animation when inserted*/
     -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: @c4;
     
     overflow : visible;
     border: @bordercolor @borderwidth solid;
     outline: none;
     padding: 3px;
     margin: 0px;
     padding-left:7px;
     font-family: monospace;
     min-height:50px;
     position: absolute;
 }
 
 
 .pretooltiparrow {
   left: 0px;
   margin: 0px;
   top: -16px;
   width: 40px;
   height: 16px;
   overflow: hidden;
   position: absolute;
 
 }
 
 .pretooltiparrow:before {
   background-color : @c4;
   border : @borderwidth @bordercolor solid; 
   z-index:11;
   content: "";
   position: absolute;
   left: 15px;
   top: 10px;
   width: 25px;
   height: 25px;
   @theta : 45deg;
   -webkit-transform: rotate(@theta);
   -moz-transform:    rotate(@theta);
   -ms-transform:     rotate(@theta);
   -o-transform:      rotate(@theta);
 }
-
-.tooltip.hide
-{
-    -webkit-animation: fadeOut 800ms;
-    -moz-animation: fadeOut 800ms;
-    animation: fadeOut 800ms;
-    opacity : 0;
-}

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

@@ -1,241 +1,241 b''
 {% 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 hide'></div>
+<div id='tooltip' class='tooltip ui-corner-all' style='display:none'></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/outputarea.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/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/contexthint.js") }} charset="utf-8"></script>
 
 {% end %}