diff --git a/content/developer/reference/frontend/framework_overview.rst b/content/developer/reference/frontend/framework_overview.rst index d05c82112..a5bf1ff21 100644 --- a/content/developer/reference/frontend/framework_overview.rst +++ b/content/developer/reference/frontend/framework_overview.rst @@ -646,4 +646,56 @@ bundle `web.assets_tests` in the page. This bundle contains mostly test tours users). The `tests` mode is then useful to be able to run these tours. .. seealso:: - - `Owl Repository `_ \ No newline at end of file + - `Owl Repository `_ + +Tooltips +======== + +Since the web client runs in a browser, tooltips can be displayed using the +usual `title` attribute. However, this approach has the following drawbacks: +these tooltips cannot be styled, they should be pure text, and they cannot be +customized in any way (so, adding a delay for them to show up and close down, or +their positioning). + +To solve these issues, the Odoo web framework provides a standard way to display +tooltips using some special data attributes: + +.. code-block:: xml + + + + +The ideal position of the tooltip can be specified thanks to the attribute +`data-tooltip-position`. It should be one of the following string: `top`, `bottom`, +`left`, `right`. The opening delay (in milliseconds) can be modified with the +`data-tooltip-delay` attribute (default: 400). + +.. code-block:: xml + + + +For advanced tooltips containing dynamic and/or html content, the +`data-tooltip-template` and `data-tooltip-info` attributes can be used. +For example, let's suppose we have the following qweb template: + +.. code-block:: xml + + +
    +
  • info.x
  • +
  • info.y
  • +
+
+ +This template can then be used in a tooltip as follows: + +.. code-block:: xml + + + +with `info` being a stringified object with two keys `x` and `y`. +