Read More
Read More
Menu Close

    Implementation of tooltip for Odoo

    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'],

     

    Searching for an experienced
    Odoo Company ?
    Read More

    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.

     

     

     

     

     

    Supported Framework Version - Odoo

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    4 comments

  • Evan
    can you give me more detailed information or tutorial for the tooltip of odoo ? Odoo tutorial gives me nothing for this tooltip. And can this tooltip used more than once, not as a tutorial for the first time only ?
    • Deepak Singh Gusain
      Hello Evan,
      You can find out tooltip implementation on odoo core modules, For example:- https://github.com/odoo/odoo/blob/13.0/addons/sale/static/src/js/tours/sale.js.
      Yes, you can use tooltip more than once by using tooltip’s trigger and extra trigger on class parameter of xml fields,forms,button etc.
      Above blog will help you implement a basic tooltip in odoo.

      Regards.
      Deepak Singh Gusain

  • woffud54
    Is there any way to manually trigger a tooltip?

    I have a button that when clicked needs to trigger a tooltip.

    • Anisha Bahukhandi (Moderator)
      Hello Woffud,
      No, default Odoo does not have any options to set pop up on the menu and button from the settings, you must create it in the module. You can share your exact requirement to us at [email protected]
      Regards
      Anisha Bahukhandi
  • Back to Top

    Table of Content