Skip to content
This repository

Add tooltips to the notebook via 'title' attr. #897

Closed
wants to merge 1 commit into from

2 participants

Min RK Fernando Perez
Min RK
Owner

All buttons, show/hide clickable areas, etc. should have some tooltip describing
what they do. There are jQuery plugins for enhanced tooltips, but this gets
the lightest version working.

closes #436

Min RK Add tooltips to the notebook via 'title' attr.
All buttons, show/hide clickable areas, etc. should have some tooltip describing
what they do.  There are jQuery plugins for enhanced tooltips, but this gets
the lightest version working.

closes #436
8ee6efd
Fernando Perez
Owner

Great!! Merged and pushed with rebase to avoid recursive merge. Thanks!!

Fernando Perez fperez closed this October 18, 2011
Min RK minrk referenced this pull request October 18, 2011
Merged

Brian's Notebook work #899

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Oct 18, 2011
Min RK Add tooltips to the notebook via 'title' attr.
All buttons, show/hide clickable areas, etc. should have some tooltip describing
what they do.  There are jQuery plugins for enhanced tooltips, but this gets
the lightest version working.

closes #436
8ee6efd
This page is out of date. Refresh to see the latest.
3  IPython/frontend/html/notebook/static/js/kernelstatus.js
@@ -24,6 +24,9 @@ var IPython = (function (IPython) {
24 24
 
25 25
     KernelStatusWidget.prototype.style = function () {
26 26
         this.element.addClass('ui-widget');
  27
+        this.element.attr('title', "The kernel execution status." +
  28
+        " If 'Busy', the kernel is currently running code." +
  29
+        " If 'Idle', it is available for execution.")
27 30
     };
28 31
 
29 32
 
1  IPython/frontend/html/notebook/static/js/leftpanel.js
@@ -30,6 +30,7 @@ var IPython = (function (IPython) {
30 30
         this.left_panel_element.addClass('border-box-sizing ui-widget');
31 31
         this.left_panel_element.width(this.width);
32 32
         this.left_panel_splitter_element.css({left : this.width});
  33
+        this.left_panel_splitter_element.attr('title', 'Click to Show/Hide left panel');
33 34
     };
34 35
 
35 36
 
1  IPython/frontend/html/notebook/static/js/pager.js
@@ -26,6 +26,7 @@ var IPython = (function (IPython) {
26 26
     Pager.prototype.style = function () {
27 27
         this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
28 28
         this.pager_element.addClass('border-box-sizing ui-widget');
  29
+        this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area');
29 30
     };
30 31
 
31 32
 
41  IPython/frontend/html/notebook/static/js/panelsection.js
@@ -30,6 +30,7 @@ var IPython = (function (IPython) {
30 30
 
31 31
     PanelSection.prototype.style = function () {
32 32
         this.header.addClass('ui-widget ui-state-default');
  33
+        this.header.attr('title', "Click to Show/Hide Section");
33 34
         this.content.addClass('ui-widget section_content');
34 35
     };
35 36
 
@@ -88,7 +89,13 @@ var IPython = (function (IPython) {
88 89
         this.content.addClass('ui-helper-clearfix');
89 90
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
90 91
         this.content.find('#new_open').buttonset();
  92
+        this.content.find('#new_notebook').attr('title', "Create a new notebook");
  93
+        this.content.find('#open_notebook').attr('title', "Open an existing notebook");
91 94
         this.content.find('#download_notebook').button();
  95
+        this.content.find('#download_notebook').attr('title',
  96
+            "Download the notebook in the specified format," + 
  97
+            " either full ipynb notebook or as a Python script.");
  98
+        // upload notebook doesn't exist:
92 99
         this.content.find('#upload_notebook').button();
93 100
         this.content.find('#download_format').addClass('ui-widget ui-widget-content');
94 101
         this.content.find('#download_format option').addClass('ui-widget ui-widget-content');
@@ -127,11 +134,29 @@ var IPython = (function (IPython) {
127 134
         this.content.addClass('ui-helper-clearfix');
128 135
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
129 136
         this.content.find('#delete_cell').button();
  137
+        this.content.find('#delete_cell').attr('title', "Delete the selected cell");
  138
+        
130 139
         this.content.find('#insert').buttonset();
  140
+        this.content.find('#insert_cell_above').attr('title', "Insert new cell above selected");
  141
+        this.content.find('#insert_cell_below').attr('title', "Insert new cell below selected");
  142
+        
131 143
         this.content.find('#move').buttonset();
  144
+        this.content.find('#move_cell_up').attr('title', "Move selected cell up one in the Notebook");
  145
+        this.content.find('#move_cell_down').attr('title', "Move selected cell down one in the Notebook");
  146
+        
132 147
         this.content.find('#cell_type').buttonset();
  148
+        this.content.find('#to_markdown').attr('title', 'Change selected cell to markdown (for text)')
  149
+        this.content.find('#to_code').attr('title', 'Change selected cell to code (for execution)')
  150
+        
133 151
         this.content.find('#cell_output').buttonset();
  152
+        this.content.find('#toggle_output').attr('title', 'Toggle visibility of the output of code cells')
  153
+        this.content.find('#clear_all_output').attr('title', 'Clear output of all code cells (actually removes the data, unlike toggle)')
  154
+        
134 155
         this.content.find('#run_cells').buttonset();
  156
+        this.content.find('#run_selected_cell').attr('title', 'Submit the selected cell for execution')
  157
+        this.content.find('#run_all_cells').attr('title', 'Run *all* code cells in the notebook in order')
  158
+        this.content.find('#autoindent').attr('title', 'Autoindent code as-you-type')
  159
+        this.content.find('#autoindent_label').attr('title', 'Autoindent code as-you-type')
135 160
     };
136 161
 
137 162
 
@@ -192,6 +217,16 @@ var IPython = (function (IPython) {
192 217
         this.content.addClass('ui-helper-clearfix');
193 218
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
194 219
         this.content.find('#int_restart').buttonset();
  220
+        this.content.find("#int_kernel").attr('title', "Interrupt the kernel with SIGINT/Ctrl-C");
  221
+        this.content.find("#restart_kernel").attr('title', 
  222
+            "Restart the kernel. This will shutdown the current kernel," + 
  223
+            " and start a new, clean kernel in its place, connected to this Notebook." +
  224
+            " This may break the connection of other clients connected to this kernel." );
  225
+        var kill_tip = "Kill the kernel on exit.  If unchecked, the kernel will remain" + 
  226
+        " active after closing the session, allowing you to reconnect and resume later.";
  227
+        this.content.find('#kill_kernel').attr('title', kill_tip);
  228
+        this.content.find('#kill_kernel_label').attr('title', kill_tip);
  229
+        
195 230
     };
196 231
 
197 232
 
@@ -224,6 +259,12 @@ var IPython = (function (IPython) {
224 259
         this.content.find('#help_buttons0').buttonset();
225 260
         this.content.find('#help_buttons1').buttonset();
226 261
         this.content.find('#help_buttons2').buttonset();
  262
+        this.content.find('#python_help').attr('title', "Open the online Python documentation in a new tab")
  263
+        this.content.find('#ipython_help').attr('title', "Open the online IPython documentation in a new tab")
  264
+        this.content.find('#numpy_help').attr('title', "Open the online NumPy documentation in a new tab")
  265
+        this.content.find('#scipy_help').attr('title', "Open the online SciPy documentation in a new tab")
  266
+        this.content.find('#matplotlib_help').attr('title', "Open the online Matplotlib documentation in a new tab")
  267
+        this.content.find('#sympy_help').attr('title', "Open the online SymPy documentation in a new tab")
227 268
     };
228 269
 
229 270
 
4  IPython/frontend/html/notebook/static/js/printwidget.js
@@ -11,6 +11,10 @@ var IPython = (function (IPython) {
11 11
 
12 12
     PrintWidget.prototype.style = function () {
13 13
         this.element.find('button#print_notebook').button();
  14
+        this.element.find('button#print_notebook').attr('title', 
  15
+            "Open a new window with printer-friendly HTML of the Notebook." +
  16
+            " Note that this is incomplete, and may not produce perfect" + 
  17
+            " printed output.");
14 18
     };
15 19
 
16 20
     PrintWidget.prototype.bind_events = function () {
1  IPython/frontend/html/notebook/static/js/quickhelp.js
@@ -22,6 +22,7 @@ var IPython = (function (IPython) {
22 22
 
23 23
     QuickHelp.prototype.style = function () {
24 24
         this.element.find('button#quick_help').button();
  25
+        this.element.find('button#quick_help').attr('title', "Show/Hide the keyboard shortcuts for the IPython Notebook");
25 26
     };
26 27
 
27 28
     QuickHelp.prototype.bind_events = function () {
1  IPython/frontend/html/notebook/static/js/savewidget.js
@@ -29,6 +29,7 @@ var IPython = (function (IPython) {
29 29
         this.element.find('input#notebook_name').addClass('ui-widget ui-widget-content');
30 30
         this.element.find('input#notebook_name').attr('tabindex','1');
31 31
         this.element.find('button#save_notebook').button();
  32
+        this.element.find('button#save_notebook').attr('title', 'Save the Notebook');
32 33
         var left_panel_width = $('div#left_panel').outerWidth();
33 34
         var left_panel_splitter_width = $('div#left_panel_splitter').outerWidth();
34 35
         $('span#save_widget').css({marginLeft:left_panel_width+left_panel_splitter_width});
4  IPython/frontend/html/notebook/templates/notebook.html
@@ -169,7 +169,7 @@ <h3 class="section_header">Cell</h3>
169 169
                     <span id="autoindent_span">
170 170
                         <input type="checkbox" id="autoindent" checked="true"></input>
171 171
                     </span>
172  
-                    <span class="checkbox_label">Autoindent:</span>
  172
+                    <span class="checkbox_label" id="autoindent_label">Autoindent:</span>
173 173
                 </div>
174 174
             </div>
175 175
         </div>
@@ -188,7 +188,7 @@ <h3 class="section_header">Kernel</h3>
188 188
                     <span id="kernel_persist">
189 189
                         <input type="checkbox" id="kill_kernel"></input>
190 190
                     </span>
191  
-                    <span class="checkbox_label">Kill kernel upon exit:</span>
  191
+                    <span class="checkbox_label" id="kill_kernel_label">Kill kernel upon exit:</span>
192 192
                 </div>
193 193
             </div>
194 194
         </div>
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.