Implementation of tooltip for Odoo
IMPLEMENTATION
We will go step by step to cover process of implementation for Tooltip
DEPENDENCIES
The module should depend on “web_tour” module.
__manifest__.py file :
'depends': ['web_tour'],
MAKING XMLID OF MENU
Make the xmlid of menu required by the “Module tour” available in the web client.
The xmlid of the menu will be used to start the tour from that menu.
my_module_tour.xml:
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- Make the xmlid of menus required by the My Module tour available in webclient -->
<record id="my_module.my_module_parent_menu" model="ir.ui.menu">
<field name="load_xmlid" eval="True"/>
</record>
</odoo>
WRITE JS
Define a function with name my_module.tour.
Below JavaScript code will create the tour of the tooltip.
Every step of this tooltip tour will be separated in a section closed with curly braces. The first section will start with menu xmlid.
Every section has four main parameters.
trigger: this is the module xmlid(e.g class id)
extra_trigger: this is also a xmlid.
content: this is the information you wants to show on hover of the mouse on the tooltip.
position: this will define the position of tooltip toggler ( top, right, bottom, left).
finally, our tour.js file will look like:
“tour.js”:
odoo.define('my_module.tour', function(require) {
"use strict";
var core = require('web.core');
var tour = require('web_tour.tour');
var _t = core._t;
tour.register('my_module_tour', {
url: "/web",
}, [tour.STEPS.MENU_MORE, {
trigger: '.o_app[data-menu-xmlid="my_module.my_module_parent_menu"], .oe_menu_toggler[data-menu-xmlid="my_module.my_module_parent_menu"]',
content: _t('Explore the information in smarter way...'),
position: 'bottom',
}
, {
trigger: ".oe_link",
extra_trigger: '.oe_highlight',
content: _t("Information for second step of tour."),
position: "right"
}
, {
trigger: ".o_form_required",
extra_trigger: '.oe_highlight',
content: _t("Information for third step of tour."),
position: "top"
}
, {
trigger: ".o_address_street",
extra_trigger: '.oe_highlight',
content: _t("Information for next and so on"),
position: "left"
}
]);
});
TEMPLATE FILE
Create the template file.
This template file will inherit web.assets_backend template and here we will include our tour.js file
my_module_templates.xml file:
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets_backend" name="mob assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/my_module/static/src/js/tour.js"></script>
</xpath>
</template>
</odoo>
TAKE THE TOUR
Everything has been done successfully.
Now it’s time to take the tour. After Installation of the module in the bottom of our parent menu we will see the tooltip toggler:
When we hover the mouse over this tooltip we will see the hidden information in little hover box:
That’s all for implementation of a tooltip. Now enjoy by taking the tour as per your wish.