diff --git a/addons/web_tour/static/src/js/tip.js b/addons/web_tour/static/src/js/tip.js
index a0d7b36264f..fb5c7652416 100644
--- a/addons/web_tour/static/src/js/tip.js
+++ b/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);
     },
diff --git a/addons/web_tour/static/src/less/tip.less b/addons/web_tour/static/src/less/tip.less
index 6c9cbc981e4..4dca388b074 100644
--- a/addons/web_tour/static/src/less/tip.less
+++ b/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;