diff --git a/IPython/frontend/html/notebook/static/js/tooltip.js b/IPython/frontend/html/notebook/static/js/tooltip.js index e0af85e..e2069a6 100644 --- a/IPython/frontend/html/notebook/static/js/tooltip.js +++ b/IPython/frontend/html/notebook/static/js/tooltip.js @@ -18,18 +18,23 @@ var IPython = (function (IPython) { var Tooltip = function (notebook) { this.tooltip = $('#tooltip'); + + // contain the button in the upper right corner this.buttons = $('
') .addClass('tooltipbuttons'); + + // will contain the docstring this.text = $('') .addClass('tooltiptext') .addClass('smalltooltip'); - this.tooltip.css('left',50+'px'); - this.tooltip.css('top',50+'px'); var tooltip = this.tooltip; var text = this.text; - var expandspan=$('').text('Expand') + // build the buttons menu on the upper right + + // expand the tooltip to see more + var expandspan=$('').text('Expand') .addClass('ui-icon') .addClass('ui-icon-plus'); var expandlink=$('').attr('href',"#") @@ -44,11 +49,10 @@ var IPython = (function (IPython) { //setTimeout(function(){that.code_mirror.focus();}, 50); }); + // open in pager var morelink=$('').attr('href',"#"); morelink.attr('role',"button"); morelink.addClass('ui-button'); - //morelink.addClass("ui-corner-all"); //rounded corner - //morelink.addClass('ui-state-default'); var morespan=$('').text('Open in Pager'); morespan.addClass('ui-icon'); morespan.addClass('ui-icon-arrowstop-l-n'); @@ -60,11 +64,10 @@ var IPython = (function (IPython) { setTimeout(function(){that.code_mirror.focus();}, 50); }); + // close the tooltip var closelink=$('').attr('href',"#"); closelink.attr('role',"button"); closelink.addClass('ui-button'); - //closelink.addClass("ui-corner-all"); //rounded corner - //closelink.adClass('ui-state-default'); // grey background and blue cross var closespan=$('').text('Close'); closespan.addClass('ui-icon'); closespan.addClass('ui-icon-close'); @@ -72,15 +75,19 @@ var IPython = (function (IPython) { closelink.click(function(){ tooltip.addClass('hide'); }); - //construct the tooltip + + //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 arrow = $('').addClass('pretooltiparrow'); this.tooltip.append(arrow); this.tooltip.append(this.buttons); - this.tooltip.append(this.buttons); this.tooltip.append(this.text); };