Use Popper.js to manage arrow position

js/src/popover.js

@@ -30,7 +30,7 @@ const Popover = (($) => {
     trigger   : 'click',
     content   : '',
     template  : '<div class="popover" role="tooltip">'
-              + '<div class="arrow"></div>'
+              + '<div class="arrow" x-arrow></div>'
               + '<h3 class="popover-title"></h3>'
               + '<div class="popover-content"></div></div>'
   })

js/src/tooltip.js

@@ -60,7 +60,7 @@ const Tooltip = (($) => {
   const Default = {
     animation           : true,
     template            : '<div class="tooltip" role="tooltip">'
-                        + '<div class="arrow"></div>'
+                        + '<div class="arrow" x-arrow></div>'
                         + '<div class="tooltip-inner"></div></div>',
     trigger             : 'hover focus',
     title               : '',

scss/_popover.scss

@@ -20,14 +20,19 @@
 
   // Arrows
   //
-  // .popover-arrow is outer, .popover-arrow::after is inner
+  // .arrow is outer, .arrow::after is inner
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $popover-arrow-width;
+    height: $popover-arrow-height;
+  }
 
   .arrow::before,
   .arrow::after {
     position: absolute;
     display: block;
-    width: 0;
-    height: 0;
     border-color: transparent;
     border-style: solid;
   }
@@ -38,7 +43,7 @@
   }
   .arrow::after {
     content: "";
-    border-width: $popover-arrow-width;
+    border-width: $popover-arrow-outer-width;
   }
 
   // Popover directions
@@ -46,21 +51,24 @@
   &.bs-popover-top {
     margin-bottom: $popover-arrow-width;
 
+    .arrow {
+      bottom: 0;
+    }
+
     .arrow::before,
     .arrow::after {
-      left: 50%;
       border-bottom-width: 0;
     }
 
     .arrow::before {
       bottom: -$popover-arrow-outer-width;
-      margin-left: -$popover-arrow-outer-width;
+      margin-left: -($popover-arrow-outer-width - 5);
       border-top-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
       bottom: -($popover-arrow-outer-width - 1);
-      margin-left: -$popover-arrow-width;
+      margin-left: -($popover-arrow-outer-width - 5);
       border-top-color: $popover-arrow-color;
     }
   }
@@ -68,21 +76,23 @@
   &.bs-popover-right {
     margin-left: $popover-arrow-width;
 
+    .arrow {
+      left: 0;
+    }
+
     .arrow::before,
     .arrow::after {
-      top: 50%;
+      margin-top: -($popover-arrow-outer-width - 3);
       border-left-width: 0;
     }
 
     .arrow::before {
       left: -$popover-arrow-outer-width;
-      margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
       left: -($popover-arrow-outer-width - 1);
-      margin-top: -($popover-arrow-outer-width - 1);
       border-right-color: $popover-arrow-color;
     }
   }
@@ -90,21 +100,23 @@
   &.bs-popover-bottom {
     margin-top: $popover-arrow-width;
 
+    .arrow {
+      top: 0;
+    }
+
     .arrow::before,
     .arrow::after {
-      left: 50%;
+      margin-left: -($popover-arrow-width - 3);
       border-top-width: 0;
     }
 
     .arrow::before {
       top: -$popover-arrow-outer-width;
-      margin-left: -$popover-arrow-outer-width;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
       top: -($popover-arrow-outer-width - 1);
-      margin-left: -$popover-arrow-width;
       border-bottom-color: $popover-arrow-color;
     }
 
@@ -124,21 +136,23 @@
   &.bs-popover-left {
     margin-right: $popover-arrow-width;
 
+    .arrow {
+      right: 0;
+    }
+
     .arrow::before,
     .arrow::after {
-      top: 50%;
+      margin-top: -($popover-arrow-outer-width - 3);
       border-right-width: 0;
     }
 
     .arrow::before {
       right: -$popover-arrow-outer-width;
-      margin-top: -$popover-arrow-outer-width;
       border-left-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
       right: -($popover-arrow-outer-width - 1);
-      margin-top: -($popover-arrow-outer-width - 1);
       border-left-color: $popover-arrow-color;
     }
   }

scss/_tooltip.scss

@@ -14,13 +14,21 @@
 
   &.show { opacity: $tooltip-opacity; }
 
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $tooltip-arrow-width;
+    height: $tooltip-arrow-height;
+  }
+
   &.bs-tooltip-top {
     padding: $tooltip-arrow-width 0;
+    .arrow {
+      bottom: 0;
+    }
 
     .arrow::before {
-      bottom: 0;
+      margin-left: -($tooltip-arrow-width - 2);
-      left: 50%;
-      margin-left: -$tooltip-arrow-width;
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
       border-top-color: $tooltip-arrow-color;
@@ -28,11 +36,12 @@
   }
   &.bs-tooltip-right {
     padding: 0 $tooltip-arrow-width;
+    .arrow {
+      left: 0;
+    }
 
     .arrow::before {
-      top: 50%;
+      margin-top: -($tooltip-arrow-width - 2);
-      left: 0;
-      margin-top: -$tooltip-arrow-width;
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
@@ -40,11 +49,12 @@
   }
   &.bs-tooltip-bottom {
     padding: $tooltip-arrow-width 0;
+    .arrow {
+      top: 0;
+    }
 
     .arrow::before {
-      top: 0;
+      margin-left: -($tooltip-arrow-width - 2);
-      left: 50%;
-      margin-left: -$tooltip-arrow-width;
       content: "";
       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-bottom-color: $tooltip-arrow-color;
@@ -52,11 +62,13 @@
   }
   &.bs-tooltip-left {
     padding: 0 $tooltip-arrow-width;
+    .arrow {
+      right: 0;
+    }
 
     .arrow::before {
-      top: 50%;
       right: 0;
-      margin-top: -$tooltip-arrow-width;
+      margin-top: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;
@@ -65,8 +77,6 @@
 
   .arrow::before {
     position: absolute;
-    width: 0;
-    height: 0;
     border-color: transparent;
     border-style: solid;
   }

scss/_variables.scss

@@ -698,7 +698,9 @@ $tooltip-padding-y:           3px !default;
 $tooltip-padding-x:           8px !default;
 $tooltip-margin:              0 !default;
 
+
 $tooltip-arrow-width:         5px !default;
+$tooltip-arrow-height:        5px !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
 
 
@@ -721,6 +723,7 @@ $popover-content-padding-y:           9px !default;
 $popover-content-padding-x:           14px !default;
 
 $popover-arrow-width:                 10px !default;
+$popover-arrow-height:                5px !default;
 $popover-arrow-color:                 $popover-bg !default;
 
 $popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;