+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+ 
+
+ + Dynamic Hover on Related Fields +
++ Dynamic Hover on Related Fields Helps you to show the configured fields in a tooltip popup
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+
+ Enhance your user experience with Dynamic Hover on Related Fields! This feature enables you to effortlessly display configured fields in a convenient tooltip popup. With the flexibility to choose which fields and models you want to showcase when hovering over relevant information, you can simplify your interactions and access key data with ease. Whether it's navigating through complex datasets or swiftly retrieving important information, Dynamic Hover empowers you to streamline your workflow and enhance productivity.
+
+ +
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+ Dynamic Hover on Related Fields
+
+
+ Dynamic Hover on Related Fields
+
+
+ Customizable Field Selection
+
+
+ Customizable Field Selection
+
+
+ Flexibility in Field and Model Selection
+
+
+ Flexibility in Field and Model Selection
+
+
+ Seamless Interaction
+
+
+ Seamless Interaction
+
+
+ Enhanced Accessibility.
+
+
+ Enhanced Accessibility.
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+ + Configuration: Go to Dynamic Hover -> New -> We can see the fields model and fields to configure. +
+
+
+ 
+
+
+ + Configured Records: Go to Dynamic Hover -> We can see the configured models and fields. +
+
+
+ 
+
+
+ + In Tree View: Hover over any configured related field to instantly view its data in popup +
+
+
+ 
+
+
+ + In Form View
+
+
+ 
+
+
+
+
+ 
+
+ + In Many2many Tags +
+
+
+
+
+ 
+
+
+ + Related Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
diff --git a/dynamic_hover_on_related_fields/static/src/js/fieldToltip.js b/dynamic_hover_on_related_fields/static/src/js/fieldToltip.js
new file mode 100644
index 000000000..d814b7e55
--- /dev/null
+++ b/dynamic_hover_on_related_fields/static/src/js/fieldToltip.js
@@ -0,0 +1,31 @@
+/** @odoo-module **/
+
+export function getTooltipInfo(params) {
+ let widgetDescription = undefined;
+ if (params.fieldInfo.widget) {
+ widgetDescription = params.fieldInfo.FieldComponent.displayName;
+ }
+
+ const info = {
+ viewMode: params.viewMode,
+ resModel: params.resModel,
+ resId: params.resId,
+ debug: Boolean(odoo.debug),
+ field: {
+ label: params.field.string,
+ name: params.field.name,
+ help: params.fieldInfo.help !== null ? params.fieldInfo.help : params.field.help,
+ type: params.field.type,
+ widget: params.fieldInfo.widget,
+ widgetDescription,
+ context: params.fieldInfo.context,
+ domain: params.field.domain,
+ modifiers: JSON.stringify(params.fieldInfo.modifiers),
+ changeDefault: params.field.change_default,
+ relation: params.field.relation,
+ selection: params.field.selection,
+ default: params.field.default,
+ },
+ };
+ return JSON.stringify(info);
+}
\ No newline at end of file
diff --git a/dynamic_hover_on_related_fields/static/src/js/formLabel.js b/dynamic_hover_on_related_fields/static/src/js/formLabel.js
new file mode 100644
index 000000000..2b1a3a355
--- /dev/null
+++ b/dynamic_hover_on_related_fields/static/src/js/formLabel.js
@@ -0,0 +1,30 @@
+/** @odoo-module **/
+
+import { FormLabel } from "@web/views/form/form_label"
+import { patch } from "@web/core/utils/patch"
+import { getTooltipInfo } from "./fieldToltip"
+
+patch(FormLabel.prototype, "Form_label", {
+
+ /**
+ * Retrieves tooltip information for the FormLabel.
+ * @returns {string} JSON string representing tooltip information.
+ */
+ get tooltipInfo() {
+ if (!odoo.debug) {
+ return JSON.stringify({
+ field: {
+ help: this.tooltipHelp,
+ },
+ });
+ }
+ return getTooltipInfo({
+ viewMode: "form",
+ resModel: this.props.record.resModel,
+ resId: this.props.record.resId,
+ field: this.props.record.fields[this.props.fieldName],
+ fieldInfo: this.props.fieldInfo,
+ help: this.tooltipHelp,
+ });
+ },
+})
\ No newline at end of file
diff --git a/dynamic_hover_on_related_fields/static/src/js/listRenderer.js b/dynamic_hover_on_related_fields/static/src/js/listRenderer.js
new file mode 100644
index 000000000..7227fbb81
--- /dev/null
+++ b/dynamic_hover_on_related_fields/static/src/js/listRenderer.js
@@ -0,0 +1,41 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch"
+import { ListRenderer } from "@web/views/list/list_renderer";
+
+patch(ListRenderer.prototype, "ListRenderer_patch", {
+ /**
+ * Generate tooltip information for a field.
+ * @param {Object} record - The record object.
+ * @param {Object} fields - The fields object.
+ * @returns {string} - JSON string containing tooltip information.
+ */
+ tolTipInfo(record, fields) {
+ const field = record.fields[fields.name]
+ const info = {
+ viewMode: "list",
+ resModel: record.resModel,
+ related_record_id: record.data[fields.name][0],
+ resId: record.resId,
+ debug: Boolean(odoo.debug),
+ field: {
+ name: field.name,
+ help: field?.help,
+ type: field.type,
+ domain: field.domain,
+ relation: field.relation,
+ },
+ };
+ return JSON.stringify(info);
+ },
+ /**
+ * Check if the field type is many2one.
+ * @param {Object} record - The record object.
+ * @param {Object} fields - The fields object.
+ * @returns {boolean} - True if the field type is many2one, false otherwise.
+ */
+ isMany2one(record, fields){
+ const field = record.fields[fields.name]
+ return field.type === 'many2one';
+ }
+})
\ No newline at end of file
diff --git a/dynamic_hover_on_related_fields/static/src/js/many2ManyTagsField.js b/dynamic_hover_on_related_fields/static/src/js/many2ManyTagsField.js
new file mode 100644
index 000000000..90d53822a
--- /dev/null
+++ b/dynamic_hover_on_related_fields/static/src/js/many2ManyTagsField.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch";
+import { Many2ManyTagsField } from "@web/views/fields/many2many_tags/many2many_tags_field";
+
+patch(Many2ManyTagsField.prototype, "Many2ManyTagsField_patch", {
+
+ /**
+ * Retrieves tag properties for the Many2ManyTagsField.
+ * @param {Object} record - The record for which tag properties are retrieved.
+ * @returns {Object} Tag properties object.
+ */
+ getTagProps(record) {
+ const field = this.props.record.fields[this.props.name]
+ const info = {
+ viewMode: "form",
+ resModel:this.props.record.resModel,
+ resId: this.props.record.resId,
+ related_record_id: record.resId,
+ debug: Boolean(odoo.debug),
+ field: {
+ name: field.name,
+ help: field?.help,
+ type: field.type,
+ domain: field.domain,
+ relation: field.relation,
+ },
+ };
+ return {
+ id: record.id, // datapoint_X
+ resId: record.resId,
+ text: record.data.display_name,
+ colorIndex: record.data[this.props.colorField],
+ onDelete: !this.props.readonly ? () => this.deleteTag(record.id) : undefined,
+ onKeydown: this.onTagKeydown.bind(this),
+ info: JSON.stringify(info)
+ };
+ }
+})
diff --git a/dynamic_hover_on_related_fields/static/src/js/many2OneField.js b/dynamic_hover_on_related_fields/static/src/js/many2OneField.js
new file mode 100644
index 000000000..5a8512bbd
--- /dev/null
+++ b/dynamic_hover_on_related_fields/static/src/js/many2OneField.js
@@ -0,0 +1,49 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch";
+import { Many2OneField } from "@web/views/fields/many2one/many2one_field";
+
+patch(Many2OneField.prototype, "Many2OneField_patch", {
+ /**
+ * Generates tooltip information for the Many2OneField.
+ * @returns {string} JSON string representing tooltip information.
+ */
+ get tooltipInfo() {
+ return this.getTooltipInfo({
+ viewMode: "form",
+ resModel: this.props.record.resModel,
+ related_record_id: this.props.record.data[this.props.name][0],
+ resId: this.props.record.resId,
+ field: this.props.record.fields[this.props.name],
+ fieldInfo: this.props.fieldInfo,
+ });
+ },
+
+ /**
+ * Constructs tooltip information object based on provided parameters.
+ * @param {Object} params - Parameters for tooltip information.
+ * @param {string} params.viewMode - View mode of the record.
+ * @param {string} params.resModel - Model of the record.
+ * @param {number} params.resId - ID of the record.
+ * @param {Object} params.field - Field information.
+ * @param {Object} params.fieldInfo - Field information.
+ * @returns {string} JSON string representing tooltip information.
+ */
+ getTooltipInfo(params){
+ const info = {
+ viewMode: params.viewMode,
+ resModel: params.resModel,
+ related_record_id: params.related_record_id,
+ resId: params.resId,
+ debug: Boolean(odoo.debug),
+ field: {
+ name: params.field.name,
+ help: params.field?.help,
+ type: params.field.type,
+ domain: params.field.domain,
+ relation: params.field.relation,
+ },
+ };
+ return JSON.stringify(info);
+ },
+})
\ No newline at end of file
diff --git a/dynamic_hover_on_related_fields/static/src/js/tooltipService.js b/dynamic_hover_on_related_fields/static/src/js/tooltipService.js
new file mode 100644
index 000000000..674f626a7
--- /dev/null
+++ b/dynamic_hover_on_related_fields/static/src/js/tooltipService.js
@@ -0,0 +1,204 @@
+/** @odoo-module **/
+import { tooltipService } from "@web/core/tooltip/tooltip_service";
+import { browser } from "@web/core/browser/browser";
+import { registry } from "@web/core/registry";
+import { Tooltip } from "@web/core/tooltip/tooltip";
+import { hasTouch } from "@web/core/browser/feature_detection";
+const rpc = require('web.rpc')
+import { whenReady } from "@odoo/owl";
+
+const OPEN_DELAY = 400;
+const CLOSE_DELAY = 200;
+tooltipService.start = (env, { popover }) => {
+ let openTooltipTimeout;
+ let closeTooltip;
+ let target = null;
+ let touchPressed;
+ const elementsWithTooltips = new Map();
+
+ /**
+ * Closes the currently opened tooltip if any, or prevent it from opening.
+ */
+ function cleanup() {
+ browser.clearTimeout(openTooltipTimeout);
+ if (closeTooltip) {
+ closeTooltip();
+ }
+ }
+
+ /**
+ * Checks that the target is in the DOM and we're hovering the target.
+ * @returns {boolean}
+ */
+ function shouldCleanup() {
+ if (!target) {
+ return false;
+ }
+ if (!document.body.contains(target)) {
+ return true; // target is no longer in the DOM
+ }
+ if (hasTouch()) {
+ return !touchPressed;
+ }
+ return false;
+ }
+
+ async function getDataFromBackend(info) {
+ if (!info?.field?.relation ) return
+ if (info?.related_record_id){
+ const requiredData = await rpc.query({
+ model: "hover.related.fields",
+ method: "finding_the_data_to_show_tooltip_many2many",
+ args:[info]});
+ info.requiredData = requiredData;
+ }else if(info?.resId){
+ const requiredData = await rpc.query({
+ model: "hover.related.fields",
+ method: "finding_the_data_to_show_tooltip",
+ args: [info]});
+ info.requiredData = requiredData;
+ }
+ }
+
+ /**
+ * Checks whether there is a tooltip registered on the event target, and
+ * if there is, creates a timeout to open the corresponding tooltip
+ * after a delay.
+ *
+ * @param {HTMLElement} el the element on which to add the tooltip
+ * @param {object} param1
+ * @param {string} [param1.tooltip] the string to add as a tooltip, if
+ * no tooltip template is specified
+ * @param {string} [param1.template] the name of the template to use for
+ * tooltip, if any
+ * @param {object} [param1.info] info for the tooltip template
+ * @param {'top'|'bottom'|'left'|'right'} param1.position
+ * @param {number} [param1.delay] delay after which the popover should
+ * open
+ */
+ async function openTooltip(el, { tooltip = "", template, info, position, delay = OPEN_DELAY }) {
+ await getDataFromBackend(info)
+ target = el;
+ cleanup();
+ if (!tooltip && !template) {
+ return;
+ }
+
+ openTooltipTimeout = browser.setTimeout(() => {
+ // verify that the element is still in the DOM
+ if (target.isConnected) {
+ closeTooltip = popover.add(
+ target,
+ Tooltip,
+ { tooltip, template, info },
+ { position }
+ );
+ // Prevent title from showing on a parent at the same time
+ target.title = "";
+ }
+ }, delay);
+ }
+
+ /**
+ * Checks whether there is a tooltip registered on the element, and
+ * if there is, creates a timeout to open the corresponding tooltip
+ * after a delay.
+ *
+ * @param {HTMLElement} el
+ */
+ function openElementsTooltip(el) {
+ if (elementsWithTooltips.has(el)) {
+ openTooltip(el, elementsWithTooltips.get(el));
+ } else if (el.matches("[data-tooltip], [data-tooltip-template]")) {
+ const dataset = el.dataset;
+ const params = {
+ tooltip: dataset.tooltip,
+ template: dataset.tooltipTemplate,
+ position: dataset.tooltipPosition,
+ };
+ if (dataset.tooltipInfo) {
+ params.info = JSON.parse(dataset.tooltipInfo);
+ }
+ if (dataset.tooltipDelay) {
+ params.delay = parseInt(dataset.tooltipDelay, 10);
+ }
+ openTooltip(el, params);
+ }
+ }
+
+ /**
+ * Checks whether there is a tooltip registered on the event target, and
+ * if there is, creates a timeout to open the corresponding tooltip
+ * after a delay.
+ *
+ * @param {MouseEvent} ev a "mouseenter" event
+ */
+ function onMouseenter(ev) {
+ openElementsTooltip(ev.target);
+ }
+
+ function onMouseleave(ev) {
+ if (target === ev.target) {
+ cleanup();
+ }
+ }
+ /**
+ * Checks whether there is a tooltip registered on the event target, and
+ * if there is, creates a timeout to open the corresponding tooltip
+ * after a delay.
+ *
+ * @param {TouchEvent} ev a "touchstart" event
+ */
+ function onTouchStart(ev) {
+ touchPressed = true;
+ openElementsTooltip(ev.target);
+ }
+
+ whenReady(() => {
+ // Regularly check that the target is still in the DOM and if not, close the tooltip
+ browser.setInterval(() => {
+ if (shouldCleanup()) {
+ cleanup();
+ }
+ }, CLOSE_DELAY);
+
+ if (hasTouch()) {
+ document.body.addEventListener("touchstart", onTouchStart);
+
+ document.body.addEventListener("touchend", (ev) => {
+ if (ev.target.matches("[data-tooltip], [data-tooltip-template]")) {
+ if (!ev.target.dataset.tooltipTouchTapToShow) {
+ touchPressed = false;
+ }
+ }
+ });
+
+ document.body.addEventListener("touchcancel", (ev) => {
+ if (ev.target.matches("[data-tooltip], [data-tooltip-template]")) {
+ if (!ev.target.dataset.tooltipTouchTapToShow) {
+ touchPressed = false;
+ }
+ }
+ });
+
+ return;
+ }
+
+ // Listen (using event delegation) to "mouseenter" events to open the tooltip if any
+ document.body.addEventListener("mouseenter", onMouseenter, { capture: true });
+ // Listen (using event delegation) to "mouseleave" events to close the tooltip if any
+ document.body.addEventListener("mouseleave", onMouseleave, { capture: true });
+ });
+
+ return {
+ add(el, params) {
+ elementsWithTooltips.set(el, params);
+ return () => {
+ elementsWithTooltips.delete(el);
+ if (target === el) {
+ cleanup();
+ }
+ };
+ },
+ };
+ }
diff --git a/dynamic_hover_on_related_fields/static/src/xml/listRenderer.xml b/dynamic_hover_on_related_fields/static/src/xml/listRenderer.xml
new file mode 100644
index 000000000..ebdd56d46
--- /dev/null
+++ b/dynamic_hover_on_related_fields/static/src/xml/listRenderer.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+ + +
+ {'data-tooltip-template': 'dynamic_hover_on_related_fields.RelatedFieldTooltip', 'data-tooltip-info': tooltipInfo, 'data-tooltip-touch-tap-to-show': 'true'}
+
+
+
+
+ Field Data
+-
+
+
-
+ :
+
+
+
+ -
+ :
+
++ ++
+
+ -
+ :
+
+
+
+
+
+
+
+
+ No Data Available !!!
+
+
+
+
+
+ Field Data
+ +-
+
+ --> Record -
-
+
+ :
+
+
+
+ -
+ :
+
+
+
+
+