[IMP] web_tour: tip animation

* Improve the JS/LESS so that its content makes the tip grow
with a bubble effect (instead of using a popover).
* Avoid flickering when the mouse leave/enter the tip or move
between the tip and its anchor element.
* Use text-align:left instead of justify
* Set the content width in JS (to a larger width) to be customizable
* Round LESS variable to avoid values like 266.6666666666
* Set opening direction according to viewport:
  - Top and bottom tips open towards the right except if they overflow
    the window on this right
  - Left and right tips open towards the bottom except if they overflow
    the window on this bottom
* Improve the 'Skip these steps' mechanism (which is easier as we don't
  use bootstrap's popover anymore)

addons/web_tour/static/src/less/keyframes.less

@@ -1,33 +1,49 @@
 @-webkit-keyframes move-left-right {
     0% {
-        .translate(0, 0);
+        .translate(-3px, 0);
     }
     100% {
-        .translate(5px, 0);
+        .translate(3px, 0);
     }
 }
 @-moz-keyframes move-left-right {
     0% {
-        .translate(0px, 0px);
+        .translate(-3px, 0);
     }
     100% {
-        .translate(5px, 0px);
+        .translate(3px, 0);
+    }
+}
+@keyframes move-left-right {
+    0% {
+        .translate(-3px, 0);
+    }
+    100% {
+        .translate(3px, 0);
     }
 }
 
 @-webkit-keyframes move-bottom-top {
     0% {
-        .translate(0, 0);
+        .translate(0, -3px);
     }
     100% {
-        .translate(0, 5px);
+        .translate(0, 3px);
     }
 }
 @-moz-keyframes move-bottom-top {
     0% {
-        .translate(0px, 0px);
+        .translate(0px, -3px);
     }
     100% {
-        .translate(0, 5px);
+        .translate(0, 3px);
+    }
+}
+@keyframes move-bottom-top {
+    0% {
+        .translate(0px, -3px);
+    }
+    100% {
+        .translate(0, 3px);
     }
 }