Add position on top-center and top-right

demo/scripts/demo.js

@@ -8,21 +8,18 @@ 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: 'right-bottom'
       },
     }, {
       element: '#logo_img',
       popover: {
         title: 'Focus Anything',
         description: 'You can use it to highlight literally anything, images, text, div, span, li etc.',
-        position: 'right-bottom',
       },
     }, {
       element: '#name_driver',
       popover: {
         title: 'Why Driver?',
         description: 'Because it lets you drive the user across the page',
-        position: 'right-bottom'
       }
     }, {
       element: '#driver-demo-head',
@@ -35,7 +32,7 @@ document.addEventListener('DOMContentLoaded', function () {
       element: '#highlight_feature',
       popover: {
         title: 'Highlight Feature',
-        description: 'You may use it to highlight single elements (with or without popover) e.g. like facebook does while creating posts'
+        description: 'You may use it to highlight single elements (with or without popover) e.g. like facebook does while creating posts',
       }
     }, {
       element: '#feature_introductions_feature',

src/core/popover.js

@@ -147,8 +147,15 @@ export default class Popover extends Element {
         this.positionOnRightBottom(position);
         break;
       case 'top':
+      case 'top-left':
         this.positionOnTop(position);
         break;
+      case 'top-center':
+        this.positionOnTopCenter(position);
+        break;
+      case 'top-right':
+        this.positionOnTopRight(position);
+        break;
       case 'bottom':
       case 'bottom-left':
         this.positionOnBottom(position);
@@ -329,6 +336,47 @@ export default class Popover extends Element {
     this.tipNode.classList.add('bottom');
   }
 
+  /**
+   * Shows the popover on the top center of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnTopCenter(elementPosition) {
+    const dimensions = this.getSize();
+    const popoverHeight = dimensions.height;
+    const popoverWidth = dimensions.width / 2;
+
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+    const nodeCenter = elementPosition.left + ((elementPosition.right - elementPosition.left) / 2);
+
+    this.node.style.top = `${elementPosition.top - popoverHeight - popoverMargin}px`;
+    this.node.style.left = `${nodeCenter - popoverWidth - this.options.padding}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    // Add the tip at the top center
+    this.tipNode.classList.add('bottom', 'position-center');
+  }
+
+  /**
+   * Shows the popover on the top right of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnTopRight(elementPosition) {
+    const dimensions = this.getSize();
+    const popoverHeight = dimensions.height;
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+
+    this.node.style.top = `${elementPosition.top - popoverHeight - popoverMargin}px`;
+    this.node.style.left = `${(elementPosition.right + this.options.padding) - dimensions.width}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    // Add the tip at the top center
+    this.tipNode.classList.add('bottom', 'position-right');
+  }
+
   /**
    * Shows the popover on the bottom of the given position
    * @param {Position} elementPosition
@@ -370,11 +418,12 @@ export default class Popover extends Element {
    * @private
    */
   positionOnBottomRight(elementPosition) {
+    const dimensions = this.getSize();
     const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
 
     this.node.style.top = `${elementPosition.bottom + popoverMargin}px`;
-    this.node.style.right = `${elementPosition.left - this.options.padding}px`;
-    this.node.style.left = '';
+    this.node.style.left = `${(elementPosition.right + this.options.padding) - dimensions.width}px`;
+    this.node.style.right = '';
     this.node.style.bottom = '';
 
     // Add the tip at the top center

src/driver.scss

@@ -38,6 +38,14 @@ div#driver-popover-item {
       border-right-color: transparent;
       border-bottom-color: transparent;
       border-left-color: transparent;
+
+      &.position-center {
+        left: 49%;
+      }
+
+      &.position-right {
+        right: 20px;
+      }
     }
 
     &.left {