[IMP] web: add a <Popover> component

Using bootstrap popover with owl is possible, but with a lot of
friction.

This commit adds a Popover element to ease developments that require
a popover. This component takes 2 props:
  - position='bottom' (optional): 'top', 'bottom', 'left', 'right'
  - title (optional)

Its usage requires setting an `opened` slot for the content of the
popover, whilst the 'trigger' of the popover uses the default slot.

E.g.
```xml
<Parent>
 <Popover>
  <t t-set="opened">
   <p>You have opened the popover, congratulations!</p>
   <button t-on-click='_handlerOnParent'>Dispatch cake</button>
  </t>
  <button class="btn btn-primary">Click me!</button>
 </Popover>
</Parent>
```

Note that:
- only one popover can be opened at a time (opening a popover will
close any previously opened popover)
- `Popover` uses `Portal` under the hood, so events are propagated
correctly even though the popover is teleported elsewhere in the dom
(see example in this commit message with `_handlerOnParent`)
- `<Popover>` is registed as a global component in QWeb and does not
need to be added to a Component's subcomponents list

closes odoo/odoo#47710

Signed-off-by: Damien Bouvy (dbo) <dbo@odoo.com>

1 files changed, 15 insertions, 0 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index db1e893c168..99b4588c450 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -505,6 +505,21 @@
     </Portal>
 </t>
 
+<t t-name="Popover" owl="1">
+    <div t-on-click="openPopover" data-popover="1">
+        <t t-slot="default"/>
+        <Portal t-if="state.displayed" target="'body'">
+            <div role="tooltip" class="o_popover" t-ref="popover">
+                <div class="arrow"/>
+                <h3 t-if="props.title" class="o_popover_header"><t t-esc="props.title"/></h3>
+                <div class="popover-body">
+                    <t t-slot="opened"/>
+                </div>
+            </div>
+        </Portal>
+    </div>
+</t>
+
 <t t-name="web.Pager" owl="1">
     <nav class="o_pager" aria-label="Pager">
         <span class="o_pager_counter" t-on-click.stop="">