diff --git a/addons/web_tip/static/src/css/tip.css b/addons/web_tip/static/src/less/tip.less
similarity index 67%
rename from addons/web_tip/static/src/css/tip.css
rename to addons/web_tip/static/src/less/tip.less
index b4c7ea53159..e71e44f8e0d 100644
--- a/addons/web_tip/static/src/css/tip.css
+++ b/addons/web_tip/static/src/less/tip.less
@@ -1,9 +1,5 @@
 .oe_tip_overlay {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    position: absolute;
+    .o-position-absolute(0, 0, 0, 0);
     opacity: 0.6;
     z-index: 1001;
     background-color: #000;
@@ -16,27 +12,17 @@
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     filter: alpha(opacity=50);
-    -webkit-transition: all 0.3s ease-out;
-       -moz-transition: all 0.3s ease-out;
-        -ms-transition: all 0.3s ease-out;
-         -o-transition: all 0.3s ease-out;
-            transition: all 0.3s ease-out;
+    .o-transition(all, 300ms, ease-out);
 }
 
 .oe_tip_helper {
     position: absolute;
     z-index: 1008;
-    background-color: #FFF;
-    background-color: rgba(255,255,255,.9);
-    border: 1px solid #777;
-    border: 1px solid rgba(0,0,0,.5);
-    border-radius: 4px;
+    background-color: @odoo-view-background-color;
+    border: 1px solid @odoo-brand-secondary;
+    border-radius: @border-radius-base;
     box-shadow: 0 2px 15px rgba(0,0,0,.4);
-    -webkit-transition: all 0.3s ease-out;
-       -moz-transition: all 0.3s ease-out;
-        -ms-transition: all 0.3s ease-out;
-         -o-transition: all 0.3s ease-out;
-            transition: all 0.3s ease-out;
+    .o-transition(all, 300ms, ease-out);
 }
 
 .oe_tip_close {
@@ -57,16 +43,13 @@
 }
 
 .oe_breathing {
-  background:transparent url(/web_tip/static/src/img/tip_throbber.png) no-repeat center center;
+  background: transparent url(/web_tip/static/src/img/tip_throbber.png) no-repeat center center;
   cursor : pointer;
   height: 58px;
   width: 58px;
   position: absolute;
   z-index: 1;
-  -webkit-animation: bounce .5s steps(12) alternate infinite;
-     -moz-animation: bounce .5s steps(12) alternate infinite;
-       -o-animation: bounce .5s steps(12) alternate infinite;
-          animation: bounce .5s steps(12) alternate infinite;
+  .o-animation(bounce, .5s, steps(12), 0s, infinite, alternate);
 }
 
 @-webkit-keyframes bounce {
@@ -88,9 +71,7 @@
 
 .oe_explode {
   opacity: 0;
-  -webkit-animation: explode .5s;
-     -moz-animation: explode .5s;
-          animation: explode .5s;
+  .o-animation(explode, .5s);
 }
 
 @-webkit-keyframes explode {
diff --git a/addons/web_tip/views/tip.xml b/addons/web_tip/views/tip.xml
index 49159b395a4..9117c682249 100644
--- a/addons/web_tip/views/tip.xml
+++ b/addons/web_tip/views/tip.xml
@@ -3,7 +3,7 @@
     <data>
         <template id="assets_backend" name="tip assets" inherit_id="web.assets_backend">
             <xpath expr="." position="inside">
-                <link rel="stylesheet" href="/web_tip/static/src/css/tip.css"/>
+                <link rel="stylesheet" href="/web_tip/static/src/less/tip.less"/>
                 <script type="text/javascript" src="/web_tip/static/src/js/tip.js"></script>
             </xpath>
         </template>