Popover
=======

Props
-----

.. list-table::
   :header-rows: 1

   * - Name
     - Type
     - Default
     - Description
   * - ``popoverClass``
     - string
     - 
     - the classes contained in ``popoverClass`` are added on the element "div.o_popover"
   * - ``position``
     - "bottom" | "top" | "left" | "right"
     - "bottom"
     - determine the position of the popover
   * - ``target``
     - string
     - 
     - if provided then the popover will be placed around this target. Selector can match multiple element
   * - ``trigger``
     - "manual" | "click" | "hover"
     - "click"
     - determine how the popover is triggered


Slots
-----

Popovers can be configured with slot

The ``default`` slot can be used to define the popover's content

.. code-block:: xml

   <Popover>
     Content
   </Popover>

Popover's target can be defined with props but there is also a slot to define it.

With props

.. code-block:: xml

   <Popover target="'.popover-target'">
     Content
   </Popover>

With slot

.. code-block:: xml

   <Popover>
     Content
     <t t-set-slot="target">
       <button>Click me to open the popover</button>
     </t>
   </Popover>

Events
------

Popover can trigger a ``popover-closed`` event when it wants to close.
This event is usually triggered by clicking outside the popover and the target
but can be triggered manually inside the popover too.

.. code-block:: xml

   <Popover>
     <header>
       <t t-esc="title" />
       <button t-on-click="trigger('popover-closed')">x</button>
     </header>
     <div>
       Popover's content
     </div>
     <t t-set-slot="target">
       <button>Click me to open the popover</button>
     </t>
   </Popover>

Popover also listens on the ``popover-compute`` event to re-compute it's
position or size when children need to.

Location in the dom
-------------------

The Popover class uses a portal to locate itself in a div with class
``o_popover_container`` but the communication with the parent goes as
usual: via props or custom/dom events.