From a62745d78a4c9cf8d16fbcbd938fc6500a15b0bb Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Mon, 23 Nov 2020 08:28:01 +0000
Subject: [PATCH] [FIX] web_tour: display the full text of tour tip steps

Before this commit the dimensions of the tour tip text obtained from
the text content was forced onto the complete active tooltip, sometimes
hiding a part of the text because the complete tooltip had additional
borders that prevent the text from using the same space as during the
measurement.

After this commit the dimensions of the tour tip text is computed by
taking the measure on the full tip by temporarily switching it to the
text display during initialization.

task-2391201

closes odoo/odoo#64771

X-original-commit: 8bd038c74c2e3b89b78e54385e5a2380fa1b54b7
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/web_tour/static/src/js/tip.js   | 16 ++++++++++++----
 addons/web_tour/static/src/xml/tip.xml |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/addons/web_tour/static/src/js/tip.js b/addons/web_tour/static/src/js/tip.js
index 12f64784913..eedd3cefb45 100644
--- a/addons/web_tour/static/src/js/tip.js
+++ b/addons/web_tour/static/src/js/tip.js
@@ -77,11 +77,19 @@ var Tip = Widget.extend({
         this.$tooltip_content = this.$(".o_tooltip_content");
         this.init_width = this.$el.outerWidth();
         this.init_height = this.$el.outerHeight();
-        this.content_width = this.$tooltip_content.outerWidth(true);
-        this.content_height = this.$tooltip_content.outerHeight(true);
+        this.$el.addClass('active');
+        this.el.style.setProperty('width', `${this.info.width}px`, 'important');
+        this.el.style.setProperty('height', 'auto', 'important');
+        this.el.style.setProperty('transition', 'none', 'important');
+        this.content_width = this.$el.outerWidth(true);
+        this.content_height = this.$el.outerHeight(true);
         this.$tooltip_content.html(this.info.scrollContent);
-        this.scrollContentWidth = this.$tooltip_content.outerWidth(true);
-        this.scrollContentHeight = this.$tooltip_content.outerHeight(true);
+        this.scrollContentWidth = this.$el.outerWidth(true);
+        this.scrollContentHeight = this.$el.outerHeight(true);
+        this.$el.removeClass('active');
+        this.el.style.removeProperty('width');
+        this.el.style.removeProperty('height');
+        this.el.style.removeProperty('transition');
         this.$tooltip_content.html(this.info.content);
         this.$window = $(window);
 
diff --git a/addons/web_tour/static/src/xml/tip.xml b/addons/web_tour/static/src/xml/tip.xml
index 09bad5610eb..eba661f65ca 100644
--- a/addons/web_tour/static/src/xml/tip.xml
+++ b/addons/web_tour/static/src/xml/tip.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
     <div t-name="Tip" t-attf-class="o_tooltip #{widget.info.position} #{widget.is_anchor_fixed_position ? 'o_tooltip_fixed' : ''}">
         <div class="o_tooltip_overlay"/>
-        <div class="o_tooltip_content" t-attf-style="width: #{widget.info.width}px;">
+        <div class="o_tooltip_content">
             <t t-raw="widget.info.content"/>
         </div>
     </div>