Add positioning docs

index.html

@@ -127,8 +127,8 @@ driver.highlight({
 
     <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>top</code>,
-        <code>right</code> or <code>bottom</code>.</p>
+      <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>.</p>
       <a href="#" class="btn__run-demo" id="run-single-element-with-popover-position">Show Demo</a>
       <pre><code class="javascript">const driver = new Driver();
 driver.highlight({
@@ -136,7 +136,10 @@ driver.highlight({
   popover: {
     title: 'Title for the Popover',
     description: 'Description for it',
-    position: 'left', // can be `top`, `left`, `right`, `bottom`
+    // position can be left, left-center, left-bottom, top,
+    // top-center, top-right, right, right-center, right-bottom,
+    // bottom, bottom-center, bottom-right
+    position: 'left',
   }
 });
 </code></pre>

readme.md

@@ -101,7 +101,10 @@ driver.highlight({
   popover: {
     title: 'Title for the Popover',
     description: 'Description for it',
-    position: 'left', // can be `top`, `left`, `right`, `bottom`
+    // position can be left, left-center, left-bottom, top,
+    // top-center, top-right, right, right-center, right-bottom,
+    // bottom, bottom-center, bottom-right
+    position: 'left',
   }
 });
 ```