[IMP] web_tree_image_tooltip :

* Add the possibility to define an alternative image field for the tooltip image to reduce the bandwidth used
* Add image in the description of the module
* Add demo data for the res.users tree view

web_tree_image_tooltip/__manifest__.py

@@ -17,6 +17,9 @@
     "category": "Web",
     "depends": ["web"],
     "data": [],
+    "demo": [
+        "demo/view_res_users.xml",
+    ],
     "assets": {
         "web.assets_backend": [
             "web_tree_image_tooltip/static/src/scss/common.scss",

web_tree_image_tooltip/demo/view_res_users.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <record id="view_users_tree" model="ir.ui.view">
+        <field name="model">res.users</field>
+        <field name="inherit_id" ref="base.view_users_tree" />
+        <field name="arch" type="xml">
+            <field name="name" position="before">
+                <field
+                    name="image_small"
+                    options="{'tooltip_image': 'image'}"
+                    widget="image"
+                    string="Image"
+                />
+            </field>
+        </field>
+    </record>
+</odoo>

web_tree_image_tooltip/readme/CONFIGURE.rst

@@ -1 +1,14 @@
 Insert `widget='image'` in your field view definition in any image field
+
+.. code:: xml
+
+    <field name="image_field" widget="image"/>
+
+
+If the model has different fields of the same image with different size
+(as ``product.product`` for instance with ``image``, ``image_medium``, ``image_small``),
+you can write the following code to reduce the load duration of the tree view.
+
+.. code:: xml
+
+    <field name="image_small" widget="image" options="{'tooltip_image': 'image'}"/>

web_tree_image_tooltip/readme/CONTRIBUTORS.rst

@@ -5,3 +5,4 @@
 * Nikul Chaudhary <nikul.chaudhary.serpentcs@gmail.com>
 * Phuc Tran Thanh <phuc@trobz.com>
 * Tharathip Chaweewongphan <tharathipc@ecosoft.co.th>
+* Sylvain LE GAL (https://www.twitter.com/legalsylvain)

web_tree_image_tooltip/readme/DESCRIPTION.rst

@@ -1,2 +1,4 @@
 This module defines a images and icons in tree view via Tooltip.
 Additionally, Default width with 30px.
+
+.. image:: ../static/description/tree_view_image.png

web_tree_image_tooltip/readme/USAGE.rst

@@ -1 +1,3 @@
 Mouse Hover in tree view image that time Tooltip effect.
+
+.. image:: ../static/description/tree_view_image_tooltip.png

web_tree_image_tooltip/static/src/js/tooltip.js

@@ -1,13 +1,40 @@
 odoo.define("web_tree_image_tooltip.web_tree_image_tooltip", function (require) {
     "use strict";
 
+    var session = require("web.session");
+    var field_utils = require("web.field_utils");
+    var FieldBinaryImage = require("web.basic_fields").FieldBinaryImage;
     var ListRenderer = require("web.ListRenderer");
+
+    FieldBinaryImage.include({
+        _render: function () {
+            this._super();
+            if (this.nodeOptions.tooltip_image) {
+                var image_src = session.url("/web/image", {
+                    model: this.model,
+                    id: JSON.stringify(this.res_id),
+                    field: this.nodeOptions.tooltip_image,
+                    // Unique forces a reload of the image when the record has been updated
+                    unique: field_utils.format
+                        .datetime(this.recordData.__last_update)
+                        .replace(/[^0-9]/g, ""),
+                });
+                this.$(".img-fluid")[0].setAttribute("tooltip-image-src", image_src);
+            }
+        },
+    });
+
     ListRenderer.include({
         events: _.extend({}, ListRenderer.prototype.events, {
             "mouseover tbody tr td .o_field_image": "_onHoverRecord_img",
         }),
         _onHoverRecord_img: function (event) {
-            var img_src = $(event.currentTarget).children(".img-fluid").attr("src");
+            var img_src =
+                $(event.currentTarget)
+                    .children(".img-fluid")
+                    .attr("tooltip-image-src") ||
+                $(event.currentTarget).children(".img-fluid").attr("src");
+
             $(event.currentTarget)
                 .tooltip({
                     title: "<img src=" + img_src + " class='tooltip_image' />",