wip

content/developer/reference/javascript/components/popover_component.rst

@@ -0,0 +1,97 @@
+
+Popover Component
+=================
+
+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.