From f981c5f8f09ff884f0e134ae8d4ee0ad5f56e3f4 Mon Sep 17 00:00:00 2001
From: Fabien Pinckaers <fp@openerp.com>
Date: Wed, 3 Aug 2022 16:38:03 +0000
Subject: [PATCH] [IMP] web: FormView: field tooltips UX

- Less Overwhelming: reduces the hover zone to an icon. Tooltip
appearances are less intrusive as you move the mouse in the screen
- More discoverable: show an icon for the fields that have a tooltip
- better UX: max-width on the popup

closes odoo/odoo#97440

Note: commit 3363e55cac reduced help messages to useful ones.
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 addons/web/static/src/core/tooltip/tooltip.scss    |  1 +
 .../web/static/src/views/fields/field_tooltip.xml  |  4 ----
 addons/web/static/src/views/form/form_label.js     | 13 ++++++++++---
 .../web/static/tests/views/form/form_view_tests.js | 14 +++++++-------
 addons/web/static/tests/views/list_view_tests.js   |  4 ++--
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/addons/web/static/src/core/tooltip/tooltip.scss b/addons/web/static/src/core/tooltip/tooltip.scss
index faacce47bf4..c43145ebe31 100644
--- a/addons/web/static/src/core/tooltip/tooltip.scss
+++ b/addons/web/static/src/core/tooltip/tooltip.scss
@@ -1,5 +1,6 @@
 .o-tooltip {
     font-size: small;
+    max-width: 400px;
 
     .o-tooltip--string {
         background-color: $o-tooltip-title-background-color;
diff --git a/addons/web/static/src/views/fields/field_tooltip.xml b/addons/web/static/src/views/fields/field_tooltip.xml
index 89fc7fe0e9b..1bdfa8b1871 100644
--- a/addons/web/static/src/views/fields/field_tooltip.xml
+++ b/addons/web/static/src/views/fields/field_tooltip.xml
@@ -3,10 +3,6 @@
 
     <t t-name="web.FieldTooltip" owl="1">
 
-        <div t-if="field.label" class="o-tooltip--string" role="tooltip">
-            <t t-esc="field.label"/> <t t-if="field.noLabel and viewMode === 'form'">(nolabel)</t>
-        </div>
-
         <p t-if="field.help" class="o-tooltip--help" role="tooltip">
             <t t-esc="field.help"/>
         </p>
diff --git a/addons/web/static/src/views/form/form_label.js b/addons/web/static/src/views/form/form_label.js
index 4cd7b6b605e..ea79db9e04d 100644
--- a/addons/web/static/src/views/form/form_label.js
+++ b/addons/web/static/src/views/form/form_label.js
@@ -24,7 +24,7 @@ export class FormLabel extends Component {
         return classes.join(" ");
     }
 
-    get hasBigTooltip() {
+    get hasTooltip() {
         return Boolean(odoo.debug) || this.tooltipHelp;
     }
 
@@ -37,6 +37,13 @@ export class FormLabel extends Component {
         return help;
     }
     get tooltipInfo() {
+        if (!odoo.debug) {
+            return JSON.stringify({
+                field: {
+                    help: this.tooltipHelp,
+                },
+            });
+        }
         return getTooltipInfo({
             viewMode: "form",
             resModel: this.props.record.resModel,
@@ -47,7 +54,7 @@ export class FormLabel extends Component {
     }
 }
 FormLabel.template = xml`
-  <label class="o_form_label" t-att-for="props.id" t-att-class="className" t-att="{'data-tooltip-template': hasBigTooltip ? 'web.FieldTooltip' : false, 'data-tooltip-info': hasBigTooltip ? tooltipInfo : false}">
-    <t t-esc="props.string" />
+  <label class="o_form_label" t-att-for="props.id" t-att-class="className" >
+    <t t-esc="props.string"/><sup class="btn-link p-2" t-if="hasTooltip" t-att="{'data-tooltip-template': 'web.FieldTooltip', 'data-tooltip-info': tooltipInfo}">?</sup>
   </label>
 `;
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index 5292791f5e2..72cf64d3a12 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -1865,28 +1865,28 @@ QUnit.module("Views", (hooks) => {
                 </form>`,
         });
 
-        await mouseEnter(target.querySelector(".o_form_label[for=foo]"));
+        await mouseEnter(target.querySelector(".o_form_label[for=foo] sup"));
         await nextTick();
         assert.strictEqual(
             target.querySelector(".o-tooltip .o-tooltip--help").textContent,
             "foo tooltip"
         );
 
-        await mouseEnter(target.querySelector(".o_form_label[for=bar]"));
+        await mouseEnter(target.querySelector(".o_form_label[for=bar] sup"));
         await nextTick();
         assert.strictEqual(
             target.querySelector(".o-tooltip .o-tooltip--help").textContent,
             "bar tooltip"
         );
 
-        await mouseEnter(target.querySelector(".o_form_label[for=foo_1]"));
+        await mouseEnter(target.querySelector(".o_form_label[for=foo_1] sup"));
         await nextTick();
         assert.strictEqual(
             target.querySelector(".o-tooltip .o-tooltip--help").textContent,
             "foo tooltip"
         );
 
-        await mouseEnter(target.querySelector(".o_form_label[for=bar_1]"));
+        await mouseEnter(target.querySelector(".o_form_label[for=bar_1] sup"));
         await nextTick();
         assert.strictEqual(
             target.querySelector(".o-tooltip .o-tooltip--help").textContent,
@@ -10466,14 +10466,14 @@ QUnit.module("Views", (hooks) => {
                     </form>`,
             });
 
-            await mouseEnter(target.querySelector(".o_form_label[for=product_id]"));
+            await mouseEnter(target.querySelector(".o_form_label[for=product_id] sup"));
             await nextTick();
             assert.strictEqual(
                 target.querySelector(".o-tooltip .o-tooltip--help").textContent,
                 "this is a tooltip\n\nValues set here are company-specific."
             );
 
-            await mouseEnter(target.querySelector(".o_form_label[for=foo]"));
+            await mouseEnter(target.querySelector(".o_form_label[for=foo] sup"));
             await nextTick();
             assert.strictEqual(
                 target.querySelector(".o-tooltip .o-tooltip--help").textContent,
@@ -10509,7 +10509,7 @@ QUnit.module("Views", (hooks) => {
                     </form>`,
             });
 
-            await mouseEnter(target.querySelector(".o_form_label"));
+            await mouseEnter(target.querySelector(".o_form_label sup"));
             await nextTick();
             assert.strictEqual(
                 target.querySelector(".o-tooltip .o-tooltip--help").textContent,
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index 31499403f61..e9dad2c078e 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -4917,7 +4917,7 @@ QUnit.module("Views", (hooks) => {
         await mouseEnter(target.querySelector("th[data-name=foo]"));
         await nextTick(); // GES: see next nextTick comment
         assert.strictEqual(
-            target.querySelectorAll(".o-tooltip .o-tooltip--string").length,
+            target.querySelectorAll(".o-tooltip .o-tooltip--technical").length,
             0,
             "should not have rendered a tooltip"
         );
@@ -4932,7 +4932,7 @@ QUnit.module("Views", (hooks) => {
         await nextTick(); // GES: I had once an indetermist failure because of no tooltip, so for safety I add a nextTick.
 
         assert.strictEqual(
-            target.querySelectorAll(".o-tooltip .o-tooltip--string").length,
+            target.querySelectorAll(".o-tooltip .o-tooltip--technical").length,
             1,
             "should have rendered a tooltip"
         );