Quantcast
Channel: Webkul Blog
Viewing all articles
Browse latest Browse all 5556

Implementation of tooltip for Odoo

$
0
0

The tooltip is a graphical user interface which is used to explore the information or hints in a smarter way using a little hover box.

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:

Tooltip Image

 

When we hover the mouse over this tooltip we will see the hidden information in little hover box:

Tooltip Image

 

 

That’s all for implementation of a tooltip. Now enjoy by taking the tour as per your wish.

 

 

 

 

 


Viewing all articles
Browse latest Browse all 5556