new tooltip style

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

@@ -1,379 +1,399 b''
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 
 body {
     overflow: hidden;
 }
 
 span#save_widget {
     padding: 5px;
     margin: 0px 0px 0px 300px;
     display:inline-block;
 }
 
 span#notebook_name {
     height: 1em;
     line-height: 1em;
     padding: 3px;
     border: none;
     font-size: 146.5%;
 }
 
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
 }
 
 .ui-menu {
   -moz-box-shadow:    0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow:         0px 6px 10px -1px #adadad;
 }
 
 .ui-menu .ui-menu-item a {
     padding: 2px 1.6em;
 }
 
 .ui-menu hr {
     margin: 0.3em 0;
 }
 
 #menubar_container {
     position: relative;
 }
 
 #notification {
     position: absolute;
     right: 3px;
     top: 3px;
     height: 25px;
     padding: 3px 6px;
     z-index: 10;
 }
 
 #toolbar {
     padding: 3px 15px;
 }
 
 #cell_type {
     font-size: 85%;
 }
 
 
 div#main_app {
     width: 100%;
     position: relative;
 }
 
 span#quick_help_area {
     position: static;
     padding: 5px 0px;
     margin: 0px 0px 0px 0px;
 }
 
 .help_string {
     float: right;
     width: 170px;
     padding: 0px 5px;
     text-align: left;
     font-size: 85%;
 }
 
 .help_string_label {
     float: right;
     font-size: 85%;
 }
 
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
 }
 
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
     margin: 0px
     background-color: white;
 }
 
 div#pager_splitter {
     height: 8px;
 }
 
 div#pager {
     padding: 15px;
     overflow: auto;
     display: none;
 }
 
 div.cell {
     width: 100%;
     padding: 5px 5px 5px 0px;
     /* This acts as a spacer between cells, that is outside the border */
     margin: 2px 0px 2px 0px;
 }
 
 div.code_cell {
     background-color: white;
 }
 /* any special styling for code cells that are currently running goes here */
 div.code_cell.running {
 }
 
 div.prompt {
     /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
     width: 11ex;
     /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
     padding: 0.4em;
     margin: 0px;
     font-family: monospace;
     text-align:right;
 }
 
 div.input {
     page-break-inside: avoid;
 }
 
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.input_prompt {
     color: navy;
     border-top: 1px solid transparent;
 }
 
 div.output {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
 }
 
 div.output_prompt {
     color: darkred;
 }
 
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
 }
 
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
     padding: 0.4em 6.1em 0.4em 0.4em;
 }
 
 /* The rest of the output_* classes are for special styling of the different
    output types */
 
 /* all text output has this class: */
 div.output_text {
     text-align: left;
     color: black;
     font-family: monospace;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
 div.output_stream {
     padding-top: 0.0em;
     padding-bottom: 0.0em;
 }
 div.output_stdout {
 }
 div.output_stderr {
     background: #fdd; /* very light red background for stderr */
 }
 
 div.output_latex {
     text-align: left;
     color: black;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.output_jpeg {
 }
 
 div.text_cell {
     background-color: white;
     padding: 5px 5px 5px 5px;
 }
 
 div.text_cell_input {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 5px;
     color: black;
 }
 
 .CodeMirror {
     line-height: 1.231;  /* Changed from 1em to our global default */
 }
 
 .CodeMirror-scroll {
     height: auto;     /* Changed to auto to autogrow */
     /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
     /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
     overflow-y: hidden;
     overflow-x: auto; /* Changed from auto to remove scrollbar */
 }
 
 /* CSS font colors for translated ANSI colors. */
 
 
 .ansiblack {color: black;}
 .ansired {color: darkred;}
 .ansigreen {color: darkgreen;}
 .ansiyellow {color: brown;}
 .ansiblue {color: darkblue;}
 .ansipurple {color: darkviolet;}
 .ansicyan {color: steelblue;}
 .ansigrey {color: grey;}
 .ansibold {font-weight: bold;}
 
 .completions , .tooltip {
     position: absolute;
     z-index: 10;
     overflow: auto;
     border: 1px solid black;
 }
 
 .completions select {
     background: white;
     outline: none;
     border: none;
     padding: 0px;
     margin: 0px;
     font-family: monospace;
 }
 
 option.context {
   background-color: #DEF7FF;
 }
 option.introspection {
   background-color: #EBF4EB;
 }
 
 @-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;}
 }
 
 /*"close" "expand" and "Open in pager button" of
 /* the tooltip*/
 .tooltip a {
     float:right;
 }
 
 /*properties of tooltip after "expand"*/
 .bigtooltip {
     height:30%;
 }
 
 /*properties of tooltip before "expand"*/
 .smalltooltip {
     text-overflow: ellipsis;
     overflow: hidden;
     height:15%;
 }
 
 .tooltip {
     /*transition when "expand"ing tooltip */
+    font-size: 14px;
     -webkit-transition-property: height;
     -webkit-transition-duration: 1s;
     -moz-transition-property: height;
     -moz-transition-duration: 1s;
     transition-property: height;
     transition-duration: 1s;
     max-width:700px;
     border-radius: 0px 10px 10px 10px;
     box-shadow: 3px 3px 5px #999;
     /*fade-in animation when inserted*/
     -webkit-animation: fadeIn 200ms;
     -moz-animation: fadeIn 200ms;
     animation: fadeIn 200ms;
     vertical-align: middle;
-    background: #FDFDD8;
+
+    background-image: linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%);
+    background-image: -o-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%);
+    background-image: -ms-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%);
+    background-image: -moz-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%);
+    background-image: -webkit-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%);
+
+    background-image: -webkit-gradient(
+        linear,
+        left bottom,
+        left top,
+        color-stop(0.13, rgb(215,215,215)),
+        color-stop(0.39, rgb(210,210,210)),
+        color-stop(0.56, rgb(227,227,227)),
+        color-stop(0.91, rgb(247,247,247))
+    );
+
+    color: #000;
+    border-color: #BBB;
     outline: none;
     padding: 3px;
     margin: 0px;
+    padding-left:7px;
     font-family: monospace;
     min-height:50px;
 }
 
 /*fixed part of the completion*/
 .completions p b {
     font-weight:bold;
 }
 
 .completions p {
     background: #DDF;
     /*outline: none;
     padding: 0px;*/
     border-bottom: black solid 1px;
     padding: 1px;
     font-family: monospace;
 }
 
 pre.dialog {
     background-color: #f7f7f7;
     border: 1px solid #ddd;
     border-radius: 3px;
     padding: 0.4em;
     padding-left: 2em;
 }
 
 p.dialog {
     padding : 0.2em;
 }
 
 .shortcut_key {
     display: inline-block;
     width: 15ex;
     text-align: right;
     font-family: monospace;
 }
 
 .shortcut_descr {
 }
 
 /* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
    to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
  */
 pre, code, kbd, samp { white-space: pre-wrap; }

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

@@ -1,108 +1,112 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
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var Tooltip = function (notebook) {
         this.tooltip = $('#tooltip');
         this.text    = $('<pre/>')
+        this.text.html('something');
+        this.tooltip.css('left',50+'px');
+        this.tooltip.css('top',50+'px');
+        this.tooltip.append(this.text);
     };
 
 
 
     //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() {
         // 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.tooltip_timeout != null){
             clearTimeout(this.tooltip_timeout);
             $('#tooltip').remove();
             this.tooltip_timeout = null;
         }
     }
     Tooltip.prototype.show = function()
     {
 	this.tooltip.removeClass('hidden');
     }	
 
     Tooltip.prototype.showInPager = function(){
         var msg_id = IPython.notebook.kernel.execute(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);
     }
 
     Tooltip.prototype.finish_tooltip = function (reply) {
 
         var expandlink=$('<a/>').attr('href',"#");
             expandlink.addClass("ui-corner-all"); //rounded corner
             expandlink.attr('role',"button");
 
         var expandspan=$('<span/>').text('Expand');
             expandspan.addClass('ui-icon');
             expandspan.addClass('ui-icon-plus');
 
         expandlink.append(expandspan);
         expandlink.attr('id','expanbutton');
         expandlink.click(function(){
             tooltip.removeClass('smalltooltip');
             tooltip.addClass('bigtooltip');
             $('#expanbutton').remove();
             setTimeout(function(){that.code_mirror.focus();}, 50);
         });
 
         var morelink=$('<a/>').attr('href',"#");
             morelink.attr('role',"button");
             morelink.addClass('ui-button');
         var morespan=$('<span/>').text('Open in Pager');
             morespan.addClass('ui-icon');
             morespan.addClass('ui-icon-arrowstop-l-n');
         morelink.append(morespan);
         morelink.click(function(){
             this.showInPager();
         });
 
 
         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.remove_and_cancel_tooltip();
             setTimeout(function(){that.code_mirror.focus();}, 50);
             });
         //construct the tooltip
         tooltip.append(closelink);
         tooltip.append(expandlink);
         tooltip.append(morelink);
         
         var pos = this.code_mirror.cursorCoords();
         tooltip.css('left',pos.x+'px');
         tooltip.css('top',pos.yBot+'px');
 
     };
 
 
     IPython.Tooltip = Tooltip;
 
     return IPython;
 }(IPython));