[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,5 +1,6 @@
 .o-tooltip {
     font-size: small;
+    max-width: 400px;
 
     .o-tooltip--string {
         background-color: $o-tooltip-title-background-color;

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>

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>
 `;

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,

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"
         );