diff --git a/IPython/frontend/html/notebook/static/less/tooltip.less b/IPython/frontend/html/notebook/static/less/tooltip.less
new file mode 100644
index 0000000..5a70351
--- /dev/null
+++ b/IPython/frontend/html/notebook/static/less/tooltip.less
@@ -0,0 +1,159 @@
+/**
+ * Primary styles
+ *
+ * Author: IPython Development Team
+ */
+
+/** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
+ * of chance of beeing generated from the ../less/[samename].less file, you can
+ * try to get back the less file by reverting somme commit in history
+ **/
+
+/*
+ * We'll try to get something pretty, so we
+ * have some strange css to have the scroll bar on
+ * the left with fix button on the top right of the tooltip
+ */
+
+// double slash comment are remove by less compilation
+// **
+// * Less mixins
+// **/
+
+// Four color of the background
+@c4 : rgb(247,247,247);
+@bordercolor : #BBB;
+@borderwidth : 1px;
+
+.dropshadow(){
+ -moz-box-shadow:    0px 6px 10px -1px #adadad;
+  -webkit-box-shadow: 0px 6px 10px -1px #adadad;
+  box-shadow:         0px 6px 10px -1px #adadad;
+}
+
+// smoth height adaptation
+.smoothheight(@t:1s) {
+    -webkit-transition-property: height;
+    -webkit-transition-duration: 1s;
+    -moz-transition-property: height;
+    -moz-transition-duration: 1s;
+    transition-property: height;
+    transition-duration: 1s;
+}
+
+@-moz-keyframes fadeOut {
+    from {opacity:1;}
+    to {opacity:0;}
+}
+
+@-webkit-keyframes fadeOut {
+    from {opacity:1;}
+    to {opacity:0;}
+}
+
+//@keyframes fadeOut {
+//    from {opacity:1;}
+//    to {opacity:0;}
+//}
+
+@-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;}
+//}
+
+.tooltip a {
+    float:right;
+}
+
+/*properties of tooltip after "expand"*/
+.bigtooltip {
+    overflow: auto;
+    height: 200px;
+    .smoothheight();
+}
+
+/*properties of tooltip before "expand"*/
+.smalltooltip{
+    .smoothheight();
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height:80px;
+}
+
+.tooltipbuttons
+{
+    position: absolute;
+    padding-right : 15px;
+    top : 0px;
+    right:0px;
+}
+
+.tooltiptext
+{   
+    /*avoid the button to overlap on some docstring*/
+    padding-right:30px
+}
+
+.tooltip {
+    max-width:700px;
+    border-radius: 4px;
+    .dropshadow;
+    /*fade-in animation when inserted*/
+    -webkit-animation: fadeOut 800ms;
+    -moz-animation: fadeOut 800ms;
+    animation: fadeOut 800ms;
+    -webkit-animation: fadeIn 800ms;
+    -moz-animation: fadeIn 800ms;
+    animation: fadeIn 800ms;
+    vertical-align: middle;
+    background-color: @c4;
+    
+    overflow : visible;
+    border: @bordercolor @borderwidth solid;
+    outline: none;
+    padding: 3px;
+    margin: 0px;
+    padding-left:7px;
+    font-family: monospace;
+    min-height:50px;
+    position: absolute;
+}
+
+
+.pretooltiparrow {
+  left: 0px;
+  margin: 0px;
+  top: -16px;
+  width: 40px;
+  height: 16px;
+  overflow: hidden;
+  position: absolute;
+
+}
+
+.pretooltiparrow:before {
+  background-color : @c4;
+  border : @borderwidth @bordercolor solid; 
+  z-index:11;
+  content: "";
+  position: absolute;
+  left: 15px;
+  top: 10px;
+  width: 25px;
+  height: 25px;
+  @theta : 45deg;
+  -webkit-transform: rotate(@theta);
+  -moz-transform:    rotate(@theta);
+  -ms-transform:     rotate(@theta);
+  -o-transform:      rotate(@theta);
+}