mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-24 12:05:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

move arow with tooltip positoin

Browse Source
This commit is contained in:
Matthias BUSSONNIER 2012-03-15 15:18:47 +01:00 committed by Brian Granger
parent fa5aae3f43
commit 52d5f3beb2
3 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
IPython/frontend/html/notebook/static/css/tooltip.css
View File

@ -97,7 +97,7 @@
background-image: linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%);
overflow: visible;
color: #000000;
border-color: #bbbbbb;
border: #bbbbbb 1px solid;
outline: none;
padding: 3px;
margin: 0px;
@ -108,16 +108,16 @@
}
.pretooltiparrow {
left: 0px;
margin-left: 0px;
margin: 0px;
top: -16px;
width: 70px;
width: 40px;
height: 16px;
overflow: hidden;
position: absolute;
}
.pretooltiparrow:before {
background-color: #f7f7f7;
border: thin silver solid ;
border: 1px #bbbbbb solid;
z-index: 11;
content: "";
position: absolute;

40
IPython/frontend/html/notebook/static/js/tooltip.js
View File

@ -49,12 +49,12 @@ var IPython = (function (IPython) {
//setTimeout(function(){that.code_mirror.focus();}, 50);
})
.append(
$('<span/>').text('Expand')
.addClass('ui-icon')
.addClass('ui-icon-plus')
);
$('<span/>').text('Expand')
.addClass('ui-icon')
.addClass('ui-icon-plus')
);
// open in pager
// open in pager
var morelink=$('<a/>').attr('href',"#")
.attr('role',"button")
.addClass('ui-button');
@ -69,7 +69,7 @@ var IPython = (function (IPython) {
setTimeout(function(){that.code_mirror.focus();}, 50);
});
// close the tooltip
// close the tooltip
var closelink=$('<a/>').attr('href',"#");
closelink.attr('role',"button");
closelink.addClass('ui-button');
@ -78,21 +78,21 @@ var IPython = (function (IPython) {
closespan.addClass('ui-icon-close');
closelink.append(closespan);
closelink.click(function(){
that.hide();
that.hide();
});
//construct the tooltip
// add in the reverse order you want them to appear
//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 = $('<div/>').addClass('pretooltiparrow');
this.tooltip.append(arrow);
// we need a phony element to make the small arrow
// of the tooltip in css
// we could try to move the arrow later
this.arrow = $('<div/>').addClass('pretooltiparrow');
this.tooltip.append(this.buttons);
this.tooltip.append(this.arrow);
this.tooltip.append(this.text);
};
@ -129,14 +129,20 @@ var IPython = (function (IPython) {
{
// move the bubble if it is not hidden
// otherwise fade it
var xinit = pos.x;
var xinter = xinit/1000*600;
var posarrowleft = xinit - xinter;
if( this._hidden == false)
{
this.tooltip.animate({'left' : pos.x-30+'px','top' :(pos.yBot+10)+'px'});
this.tooltip.animate({'left' : xinter-30+'px','top' :(pos.yBot+10)+'px'});
} else
{
this.tooltip.css({'left' : pos.x-30+'px'});
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._hidden = false;

17
IPython/frontend/html/notebook/static/less/tooltip.less
View File

@ -23,6 +23,7 @@
@c3 : rgb(227,227,227);
@c4 : rgb(247,247,247);
@bordercolor : #BBB;
@borderwidth : 1px;
@textColor : #000;
@-moz-keyframes fadeOut {
@ -102,10 +103,10 @@
}
.tooltip {
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
/*transition when "expand"ing tooltip */
-webkit-transition-property: height;
-webkit-transition-duration: 1s;
@ -128,7 +129,7 @@
.linearGradient(13%,@c1, 39%, @c2 , 56%,@c3, 91% , @c4) ;
overflow : visible;
color: @textColor;
border-color: @bordercolor;
border: @bordercolor @borderwidth solid;
outline: none;
padding: 3px;
margin: 0px;
@ -141,9 +142,9 @@
.pretooltiparrow {
left: 0px;
margin-left: 0px;
margin: 0px;
top: -16px;
width: 70px;
width: 40px;
height: 16px;
overflow: hidden;
position: absolute;
@ -151,7 +152,7 @@
}
.pretooltiparrow:before {
background-color : @c4;
border : thin silver solid ;
border : @borderwidth @bordercolor solid;
z-index:11;
content: "";
position: absolute;