diff --git a/web_tree_image_tooltip/__manifest__.py b/web_tree_image_tooltip/__manifest__.py
index d5ed10f2c..e88fb052b 100644
--- a/web_tree_image_tooltip/__manifest__.py
+++ b/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",
diff --git a/web_tree_image_tooltip/demo/view_res_users.xml b/web_tree_image_tooltip/demo/view_res_users.xml
new file mode 100644
index 000000000..94535d8f4
--- /dev/null
+++ b/web_tree_image_tooltip/demo/view_res_users.xml
@@ -0,0 +1,17 @@
+
+
+
+ res.users
+
+
+
+
+
+
+
+
diff --git a/web_tree_image_tooltip/readme/CONFIGURE.rst b/web_tree_image_tooltip/readme/CONFIGURE.rst
index b992cb9d5..11a612f60 100644
--- a/web_tree_image_tooltip/readme/CONFIGURE.rst
+++ b/web_tree_image_tooltip/readme/CONFIGURE.rst
@@ -1 +1,14 @@
Insert `widget='image'` in your field view definition in any image field
+
+.. code:: xml
+
+
+
+
+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
+
+
diff --git a/web_tree_image_tooltip/readme/CONTRIBUTORS.rst b/web_tree_image_tooltip/readme/CONTRIBUTORS.rst
index 779590429..ce2d46287 100644
--- a/web_tree_image_tooltip/readme/CONTRIBUTORS.rst
+++ b/web_tree_image_tooltip/readme/CONTRIBUTORS.rst
@@ -5,3 +5,4 @@
* Nikul Chaudhary
* Phuc Tran Thanh
* Tharathip Chaweewongphan
+* Sylvain LE GAL (https://www.twitter.com/legalsylvain)
diff --git a/web_tree_image_tooltip/readme/DESCRIPTION.rst b/web_tree_image_tooltip/readme/DESCRIPTION.rst
index 95ac0f6b4..2796f0353 100644
--- a/web_tree_image_tooltip/readme/DESCRIPTION.rst
+++ b/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
diff --git a/web_tree_image_tooltip/readme/USAGE.rst b/web_tree_image_tooltip/readme/USAGE.rst
index 0357aceea..037ec3259 100644
--- a/web_tree_image_tooltip/readme/USAGE.rst
+++ b/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
diff --git a/web_tree_image_tooltip/static/description/tree_view_image.png b/web_tree_image_tooltip/static/description/tree_view_image.png
new file mode 100644
index 000000000..efbd51cbd
Binary files /dev/null and b/web_tree_image_tooltip/static/description/tree_view_image.png differ
diff --git a/web_tree_image_tooltip/static/description/tree_view_image_tooltip.png b/web_tree_image_tooltip/static/description/tree_view_image_tooltip.png
new file mode 100644
index 000000000..22b8c2ead
Binary files /dev/null and b/web_tree_image_tooltip/static/description/tree_view_image_tooltip.png differ
diff --git a/web_tree_image_tooltip/static/src/js/tooltip.js b/web_tree_image_tooltip/static/src/js/tooltip.js
index d3bd41231..b0008cc1f 100644
--- a/web_tree_image_tooltip/static/src/js/tooltip.js
+++ b/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: "
",