[FIX] web_tour: first positionning of tips

Before being positionned, the tip is at the end of the body, thus
adding a scrollbar... which prevents to calculate the correct x
position of the tip.

The chosen solution is to place the tip at the center of the screen
in LESS before the first positionning. This also prevents the content
to overflow the body and does not break animation of the tip as its
display property is always block.

addons/web_tour/static/src/js/tip.js

@@ -47,22 +47,24 @@ return Widget.extend({
         this.content_height = this.$tooltip_content.outerHeight(true);
         this.$window = $(window);
 
+        this.$tooltip_content.css({
+            width: "100%",
+            height: "100%",
+        });
+
         _.each(this.info.event_handlers, (function(data) {
             this.$tooltip_content.on(data.event, data.selector, data.handler);
         }).bind(this));
         this._bind_anchor_events();
 
         this._reposition();
+        this.$el.css("opacity", 1);
         core.bus.on('scroll resize', this, function() {
             if (this.tip_opened) {
                 this._to_bubble_mode(true);
             }
             this._reposition();
         });
-        this.$tooltip_content.css({
-            width: "100%",
-            height: "100%",
-        });
 
         return this._super.apply(this, arguments);
     },

addons/web_tour/static/src/less/tip.less

@@ -31,7 +31,8 @@
     @o-tip-arrow-delay-out: floor(@o-tip-duration-out / 2);
 
     box-sizing: content-box;
-    position: absolute;
+    .o-position-absolute(@top: 50%, @left: 50%);
+    opacity: 0;
     width: @o-tip-size;
     height: @o-tip-size;
     border: @o-tip-border-width solid @odoo-brand-primary;