Position on bottom center

demo/scripts/demo.js

@@ -7,14 +7,15 @@ document.addEventListener('DOMContentLoaded', function () {
       popover: {
         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!'
+        nextBtnText: 'Okay, Start!',
+        position: 'bottom-center'
       },
     }, {
       element: '#logo_img',
       popover: {
         title: 'Focus Anything',
         description: 'You can use it to highlight literally anything, images, text, div, span, li etc.',
-        position: 'bottom'
+        position: 'bottom-center',
       },
     }, {
       element: '#name_driver',

src/core/element.js

@@ -111,6 +111,7 @@ export default class Element {
    * Gets the calculated position on screen, around which
    * we need to draw
    * @public
+   * @return {Position}
    */
   getCalculatedPosition() {
     const body = this.document.body;

src/core/popover.js

@@ -136,8 +136,12 @@ export default class Popover extends Element {
         this.positionOnTop(position);
         break;
       case 'bottom':
+      case 'bottom-left':
         this.positionOnBottom(position);
         break;
+      case 'bottom-center':
+        this.positionOnBottomCenter(position);
+        break;
       case 'auto':
       default:
         this.autoPosition(position);
@@ -242,6 +246,25 @@ export default class Popover extends Element {
     this.tipNode.classList.add('top');
   }
 
+  /**
+   * Shows the popover on the bottom-center of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnBottomCenter(elementPosition) {
+    const popoverWidth = this.getSize().width / 2;
+    const nodeCenter = elementPosition.left + ((elementPosition.right - elementPosition.left) / 2);
+    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.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('top', 'center');
+  }
+
   /**
    * Automatically positions the popover around the given position
    * such that the element and popover remain in view

src/driver.scss

@@ -65,6 +65,10 @@ div#driver-popover-item {
       border-bottom-color: $popover-bg;
       border-left-color: transparent;
     }
+
+    &.center {
+      left: 49%;
+    }
   }
 
   .driver-popover-footer {