diff --git a/scss/_popover.scss b/scss/_popover.scss
index 950d6ca3960f..754008af9d1a 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -25,10 +25,14 @@
   .arrow {
     position: absolute;
     display: block;
-    width: $popover-arrow-width;
-    height: $popover-arrow-height;
+    width: calc(2*#{$popover-border-width} + #{$popover-arrow-width});
+    height: calc(2*#{$popover-border-width} + #{$popover-arrow-height});
   }
 
+  $popover-arrow-margin: -$popover-arrow-width / 2;
+  $popover-arrow-before-coor: calc(-#{$popover-arrow-width} - #{$popover-border-width});
+  $popover-arrow-after-coor: -$popover-arrow-width;
+
   .arrow::before,
   .arrow::after {
     position: absolute;
@@ -39,11 +43,11 @@
 
   .arrow::before {
     content: "";
-    border-width: $popover-arrow-outer-width;
+    border-width: $popover-arrow-width;
   }
   .arrow::after {
     content: "";
-    border-width: $popover-arrow-outer-width;
+    border-width: $popover-arrow-width;
   }
 
   // Popover directions
@@ -57,18 +61,17 @@
 
     .arrow::before,
     .arrow::after {
+      margin-left: $popover-arrow-margin;
       border-bottom-width: 0;
     }
 
     .arrow::before {
-      bottom: -$popover-arrow-outer-width;
-      margin-left: -($popover-arrow-outer-width - 5);
+      bottom: $popover-arrow-before-coor;
       border-top-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      bottom: -($popover-arrow-outer-width - 1);
-      margin-left: -($popover-arrow-outer-width - 5);
+      bottom: $popover-arrow-after-coor;
       border-top-color: $popover-arrow-color;
     }
   }
@@ -82,17 +85,17 @@
 
     .arrow::before,
     .arrow::after {
-      margin-top: -($popover-arrow-outer-width - 3);
+      margin-top: $popover-arrow-margin;
       border-left-width: 0;
     }
 
     .arrow::before {
-      left: -$popover-arrow-outer-width;
+      left: $popover-arrow-before-coor;
       border-right-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      left: -($popover-arrow-outer-width - 1);
+      left: $popover-arrow-after-coor;
       border-right-color: $popover-arrow-color;
     }
   }
@@ -106,17 +109,17 @@
 
     .arrow::before,
     .arrow::after {
-      margin-left: -($popover-arrow-width - 3);
+      margin-left: $popover-arrow-margin;
       border-top-width: 0;
     }
 
     .arrow::before {
-      top: -$popover-arrow-outer-width;
+      top: $popover-arrow-before-coor;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      top: -($popover-arrow-outer-width - 1);
+      top: $popover-arrow-after-coor;
       border-bottom-color: $popover-arrow-color;
     }
 
@@ -142,17 +145,17 @@
 
     .arrow::before,
     .arrow::after {
-      margin-top: -($popover-arrow-outer-width - 3);
+      margin-top: $popover-arrow-margin;
       border-right-width: 0;
     }
 
     .arrow::before {
-      right: -$popover-arrow-outer-width;
+      right: $popover-arrow-before-coor;
       border-left-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      right: -($popover-arrow-outer-width - 1);
+      right: $popover-arrow-after-coor;
       border-left-color: $popover-arrow-color;
     }
   }
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index fe97fbbbd0d7..50158170a320 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -1,4 +1,5 @@
 // Base class
+
 .tooltip {
   position: absolute;
   z-index: $zindex-tooltip;
@@ -21,6 +22,8 @@
     height: $tooltip-arrow-height;
   }
 
+  $tooltip-arrow-margin: -$tooltip-arrow-width / 2;
+
   &.bs-tooltip-top {
     padding: $tooltip-arrow-width 0;
     .arrow {
@@ -28,7 +31,7 @@
     }
 
     .arrow::before {
-      margin-left: -($tooltip-arrow-width - 2);
+      margin-left: $tooltip-arrow-margin;
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
       border-top-color: $tooltip-arrow-color;
@@ -41,7 +44,7 @@
     }
 
     .arrow::before {
-      margin-top: -($tooltip-arrow-width - 2);
+      margin-top: $tooltip-arrow-margin;
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
@@ -54,7 +57,7 @@
     }
 
     .arrow::before {
-      margin-left: -($tooltip-arrow-width - 2);
+      margin-left: $tooltip-arrow-margin;
       content: "";
       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-bottom-color: $tooltip-arrow-color;
@@ -68,7 +71,7 @@
 
     .arrow::before {
       right: 0;
-      margin-top: -($tooltip-arrow-width - 2);
+      margin-top: $tooltip-arrow-margin;
       content: "";
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c0b5494e6182..0306ff426068 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -608,40 +608,39 @@ $tooltip-max-width:           200px !default;
 $tooltip-color:               $white !default;
 $tooltip-bg:                  $black !default;
 $tooltip-opacity:             .9 !default;
-$tooltip-padding-y:           3px !default;
-$tooltip-padding-x:           8px !default;
+$tooltip-padding-y:           .1875rem !default;
+$tooltip-padding-x:           .5rem !default;
 $tooltip-margin:              0 !default;
 
 
-$tooltip-arrow-width:         5px !default;
-$tooltip-arrow-height:        5px !default;
+$tooltip-arrow-width:         .3125rem !default;
+$tooltip-arrow-height:        .3125rem !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
 
 
 // Popovers
 
-$popover-inner-padding:               1px !default;
+$popover-inner-padding:               .0625rem !default;
 $popover-bg:                          $white !default;
 $popover-max-width:                   276px !default;
 $popover-border-width:                $border-width !default;
 $popover-border-color:                rgba($black,.2) !default;
-$popover-box-shadow:                  0 5px 10px rgba($black,.2) !default;
+$popover-box-shadow:                  0 .3125rem .625rem rgba($black,.2) !default;
 
 $popover-header-bg:                    darken($popover-bg, 3%) !default;
 $popover-header-color:                 $headings-color !default;
-$popover-header-padding-y:             8px !default;
-$popover-header-padding-x:             14px !default;
+$popover-header-padding-y:             .5rem !default;
+$popover-header-padding-x:             .875rem !default;
 
 $popover-body-color:               $body-color !default;
-$popover-body-padding-y:           9px !default;
-$popover-body-padding-x:           14px !default;
+$popover-body-padding-y:           .5625rem !default;
+$popover-body-padding-x:           .875rem !default;
 
-$popover-arrow-width:                 10px !default;
-$popover-arrow-height:                5px !default;
+$popover-arrow-width:                 .8rem !default;
+$popover-arrow-height:                .4rem !default;
 $popover-arrow-color:                 $popover-bg !default;
 
-$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
-$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
+$popover-arrow-outer-color:            fade-in($popover-border-color, .05) !default;
 
 
 // Badges