Add position on right center

demo/scripts/demo.js

@@ -8,21 +8,21 @@ document.addEventListener('DOMContentLoaded', function () {
         title: 'Before we start',
         description: 'This is just one use-case, make sure to check out the rest of the docs below.',
         nextBtnText: 'Okay, Start!',
-        position: 'left-bottom'
+        position: 'right-center'
       },
     }, {
       element: '#logo_img',
       popover: {
         title: 'Focus Anything',
         description: 'You can use it to highlight literally anything, images, text, div, span, li etc.',
-        position: 'left-bottom',
+        position: 'right-center',
       },
     }, {
       element: '#name_driver',
       popover: {
         title: 'Why Driver?',
         description: 'Because it lets you drive the user across the page',
-        position: 'left-bottom'
+        position: 'right-center'
       }
     }, {
       element: '#driver-demo-head',

src/core/popover.js

@@ -127,6 +127,7 @@ export default class Popover extends Element {
     // Position the popover around the given position
     switch (this.options.position) {
       case 'left':
+      case 'left-top':
         this.positionOnLeft(position);
         break;
       case 'left-center':
@@ -136,8 +137,12 @@ export default class Popover extends Element {
         this.positionOnLeftBottom(position);
         break;
       case 'right':
+      case 'right-top':
         this.positionOnRight(position);
         break;
+      case 'right-center':
+        this.positionOnRightCenter(position);
+        break;
       case 'top':
         this.positionOnTop(position);
         break;
@@ -238,9 +243,7 @@ export default class Popover extends Element {
     const popoverCenter = popoverHeight / 2;
 
     const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
     const elementCenter = (elementPosition.bottom - elementPosition.top) / 2;
-
     const centerPosition = (elementPosition.top - popoverCenter) + elementCenter;
 
     this.node.style.left = `${elementPosition.left - popoverWidth - popoverMargin}px`;
@@ -267,6 +270,28 @@ export default class Popover extends Element {
     this.tipNode.classList.add('left');
   }
 
+  /**
+   * Shows the popover on the right of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnRightCenter(elementPosition) {
+    const popoverDimensions = this.getSize();
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+
+    const popoverHeight = popoverDimensions.height;
+    const popoverCenter = popoverHeight / 2;
+    const elementCenter = (elementPosition.bottom - elementPosition.top) / 2;
+    const centerPosition = (elementPosition.top - popoverCenter) + elementCenter;
+
+    this.node.style.left = `${elementPosition.right + popoverMargin}px`;
+    this.node.style.top = `${centerPosition}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    this.tipNode.classList.add('left', 'position-center');
+  }
+
   /**
    * Shows the popover on the top of the given position
    * @param {Position} elementPosition

src/driver.scss

@@ -47,6 +47,15 @@ div#driver-popover-item {
       border-right-color: $popover-bg;
       border-bottom-color: transparent;
       border-left-color: transparent;
+
+      &.position-center {
+        top: 46%;
+      }
+
+      &.position-bottom {
+        top: auto;
+        bottom: 20px;
+      }
     }
 
     &.right {