move arow with tooltip positoin

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

@@ -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;

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

@@ -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;

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

@@ -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;