How to create a function to set dynamic tooltip for field?


When I rollover my mouse to product field in order line, I want to pop up tooltip with infomations , like cost, qty on hand etc instead of going into the product screen? I understand tooltip is configure with the attribute help when creating the field, could I put a function to retrive the information instead? If yes please provide an example.thanks in advance.

1 Comment
Emanuel Cino

I'm also interested in doing this!

1 Answer
Best Answer

The aim of the attribute help=  is to display some general information on the field and not on the dynamically attached elements of that field. IMHO this should be achieved with JavaScript, asynchronous in this case as the field elements should be rendered afore. I do not insist that the way to do the trick I am going to describe is the only and the best one but it may give you the basic idea and inspire for a better solution.

 Let us create a module dynamic_tooltip with the following structure:

|── assets.xml
|── static
│     └── src
│             └── js
│                     └── sale_order_line_tooltip.js
|── view.xml

We are putting there an empty file in order to avoid ImportError on the server start. 

The file assets.xml incorporates our JS code into web.assets_backend and looks as follows:

<?xml version="1.0" encoding="UTF-8"?>
<template id="assets_backend" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script src="/dynamic_tooltip/static/src/js/sale_order_line_tooltip.js"
type="text/javascript" />

Our JS file should be placed under static/src/js/ as a generally good Odoo practice. I am not a JS master so those who have way with it -- no hard feelings please.


odoo.define('dynamic_tooltip', function(require) {

var core = require('web.core'), // get tree view widgets
Model = require('web.DataModel'); // make asynchronous calls to the DB

/* Make a special widget to include dynamic tooltips for the product name char field,
see addons/web/static/src/js/views/list_view.js for reference.
var DynamicTooltip = core.list_widget_registry.get('field').extend({
_format: function (row_data, options) {
var value = row_data[].value;
var product_tmpl_id = row_data[].value[0],
product_name = row_data[].value[1];

// Create a Query() object to make a request to the DB
var productTemplate = new Model('product.template')
.filter([['id', '=', product_tmpl_id]])
.then(function(res) {
if (res) {
// Attach the tooltip asynchronously after the corresponding element is rendered
$('#' + product_tmpl_id).prop('title', res.description_sale);
// Return a <p> tag with id of the product_temlate record
return '<p id="' + product_tmpl_id + '">' + product_name + '</p>';

// Make the created widget accessible by other models
core.list_widget_registry.add('field.dynamic_tooltip', DynamicTooltip);

It goes without saying that there are lots of ways to play with CSS and with Bootstrap Tooltips in particular, this is aimed at demonstrating the simplest principle possible.

The JS above is in fact pretty plain and simple so it should not be difficult to translate it into human language. More on Odoo JS calls to DB you can read here: More on Odoo widgets in general you can learn by examining the source code under addons/web/static/src/js/views, it is quite straightforward and easy to grasp.

So far we have created a widget that attaches tooltips with product descriptions to the elements containing product names but we only want this functionality in sale order lines tree and not anywhere else. For that purpose we tell Odoo where exactly to use the created widget i.e. in the corresponding sale order view only:


<?xml version="1.0" encoding="utf-8"?>
<record id="sale_order_customer_note" model="ir.ui.view">
<field name="name">sale.order.line.dynamic.tooltip</field>
<field name="model">sale.order</field>
<field name="inherit_id" ref="sale.view_order_form"/>
<field name="arch" type="xml">
<xpath expr="//tree/field[@name='product_id']" position="attributes">
<attribute name="widget">dynamic_tooltip</attribute>

Under Odoo general module layout we also need a file that should look something like this:

'name': 'Sale Order Dynamic Tooltip',
'author': 'thompsonn',
'application': True,
'data': ['view.xml',
'depends': ['base', 'sale']

All-a-taut-o, now you can install the module and try it yourself.

Hope this would be of any help to those interested. Thanks.