update demo page

josias-r · Nov 2, 2022 · a78e97f · a78e97f
1 parent fdb876c
commit a78e97f
Showing 1 changed file with 17 additions and 15 deletions.
diff --git 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,23 +430,23 @@ <h4 id="first-element-introduction">
       className: 'first-step-popover-class',
       title: 'Title on Popover',
       description: 'Body of the popover',
-      position: 'left'
+      prefferedPosition: 'left'
     }
   },
   {
     element: '#second-element-introduction',
     popover: {
       title: 'Title on Popover',
       description: 'Body of the popover',
-      position: 'top'
+      prefferedPosition: 'top'
     }
   },
   {
     element: '#third-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>