From a78e97f89fc2a4faebf8328735a8cf9883bb26d3 Mon Sep 17 00:00:00 2001
From: josias-r <josias.ribi@gmail.com>
Date: Wed, 2 Nov 2022 15:59:40 +0100
Subject: [PATCH] update demo page

---
 index.html | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 561e342..7823d58 100644
--- a/index.html
+++ b/index.html
@@ -270,13 +270,15 @@ <h4>Highlighting a Single Element – With Popover</h4>
         <div id="single-element-with-popover-position" class="section__example">
           <h4>Popover Positioning</h4>
           <p>
-            You can also, change the position of the popover to be either
-            <code>left</code>, <code>left-center</code>,
-            <code>left-bottom</code>, <code>top</code>, <code>top-center</code>,
-            <code>top-right</code>, <code>right</code>,
-            <code>right-center</code>, <code>right-bottom</code> or
-            <code>bottom</code>, <code>bottom-center</code>,
-            <code>bottom-right</code>, <code>mid-center</code>.
+            You can also, change the preffered position of the popover to be
+            either
+            <code>top</code>, <code>bottom</code>, <code>left</code>,
+            <code>right</code>.
+          </p>
+          <p>
+            And for even more fine-grain control define the alignment of the
+            popover to be either
+            <code>start</code>, <code>center</code>, <code>end</code>
           </p>
           <a
             href="#"
@@ -290,10 +292,10 @@ <h4>Popover Positioning</h4>
   popover: {
     title: 'Title for the Popover',
     description: 'Description for it',
-    // position can be left, left-center, left-bottom, top,
-    // top-center, top-right, right, right-center, right-bottom,
-    // bottom, bottom-center, bottom-right, mid-center
-    position: 'left',
+    // prefferedPosition can be top, bottom, left, right
+    prefferedPosition: 'left',
+    // alignment can be start, center, end
+    alignment: "start"
   }
 });
 </code></pre>
@@ -428,7 +430,7 @@ <h4 id="first-element-introduction">
       className: 'first-step-popover-class',
       title: 'Title on Popover',
       description: 'Body of the popover',
-      position: 'left'
+      prefferedPosition: 'left'
     }
   },
   {
@@ -436,7 +438,7 @@ <h4 id="first-element-introduction">
     popover: {
       title: 'Title on Popover',
       description: 'Body of the popover',
-      position: 'top'
+      prefferedPosition: 'top'
     }
   },
   {
@@ -444,7 +446,7 @@ <h4 id="first-element-introduction">
     popover: {
       title: 'Title on Popover',
       description: 'Body of the popover',
-      position: 'right'
+      prefferedPosition: 'right'
     }
   },
 ]);
@@ -484,7 +486,7 @@ <h4>Without Overlay</h4>
   popover: {
     title: 'Title for the Popover',
     description: 'Description for it',
-    position: 'top', // can be `top`, `left`, `right`, `bottom`
+    prefferedPosition: 'top', // can be `top`, `left`, `right`, `bottom`
   }
 });
 </code></pre>