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..e9b28a5
--- /dev/null
+++ b/IPython/frontend/html/notebook/static/less/tooltip.less
@@ -0,0 +1,167 @@
+/**
+ * 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 of 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);
+}
+
+.tooltip.hide
+{
+ -webkit-animation: fadeOut 800ms;
+ -moz-animation: fadeOut 800ms;
+ animation: fadeOut 800ms;
+ opacity : 0;
+}