diff --git a/style/components/popover.less b/style/components/popover.less
index 1f90c51502..bd4964481b 100644
--- a/style/components/popover.less
+++ b/style/components/popover.less
@@ -147,8 +147,6 @@
   &-placement-top > &-arrow,
   &-placement-topLeft > &-arrow,
   &-placement-topRight > &-arrow {
-    left: 50%;
-    margin-left: -@popover-arrow-outer-width;
     border-bottom-width: 0;
     border-top-color: @popover-arrow-outer-color;
     bottom: @popover-distance - @popover-arrow-outer-width + 1;
@@ -160,19 +158,20 @@
       border-top-color: @popover-arrow-color;
     }
   }
+  &-placement-top > &-arrow {
+    left: 50%;
+    margin-left: -@popover-arrow-outer-width;
+  }
   &-placement-topLeft > &-arrow {
-    left: 15%;
+    left: 16px;
   }
   &-placement-topRight > &-arrow {
-    left: 85%;
+    right: 16px;
   }
 
-  &-placement-right > &-arrow,
   &-placement-rightTop > &-arrow,
   &-placement-rightBottom > &-arrow {
-    top: 50%;
     left: @popover-distance - @popover-arrow-outer-width + 1;
-    margin-top: -@popover-arrow-outer-width;
     border-left-width: 0;
     border-right-color: @popover-arrow-outer-color;
     &:after {
@@ -183,18 +182,20 @@
       border-right-color: @popover-arrow-color;
     }
   }
+  &-placement-right > &-arrow {
+    top: 50%;
+    margin-top: -@popover-arrow-outer-width;
+  }
   &-placement-rightTop > &-arrow {
-    top: 15%;
+    top: 12px;
   }
   &-placement-rightBottom > &-arrow {
-    top: 85%;
+    bottom: 12px;
   }
 
   &-placement-bottom > &-arrow,
   &-placement-bottomLeft > &-arrow,
   &-placement-bottomRight > &-arrow {
-    left: 50%;
-    margin-left: -@popover-arrow-outer-width;
     border-top-width: 0;
     border-bottom-color: @popover-arrow-outer-color;
     top: @popover-distance - @popover-arrow-outer-width + 1;
@@ -206,19 +207,21 @@
       border-bottom-color: @popover-arrow-color;
     }
   }
+  &-placement-bottom > &-arrow {
+    left: 50%;
+    margin-left: -@popover-arrow-outer-width;
+  }
   &-placement-bottomLeft > &-arrow {
-    left: 15%;
+    left: 16px;
   }
   &-placement-bottomRight > &-arrow {
-    left: 85%;
+    right: 16px;
   }
 
   &-placement-left > &-arrow,
   &-placement-leftTop > &-arrow,
   &-placement-leftBottom > &-arrow {
-    top: 50%;
     right: @popover-distance - @popover-arrow-outer-width + 1;
-    margin-top: -@popover-arrow-outer-width;
     border-right-width: 0;
     border-left-color: @popover-arrow-outer-color;
     &:after {
@@ -229,11 +232,14 @@
       bottom: -@popover-arrow-width;
     }
   }
+  &-placement-left > &-arrow {
+    top: 50%;
+    margin-top: -@popover-arrow-outer-width;
+  }
   &-placement-leftTop > &-arrow {
-    top: 15%;
+    top: 12px;
   }
   &-placement-leftBottom > &-arrow {
-    top: 85%;
+    bottom: 12px;
   }
-
 }
diff --git a/style/components/tooltip.less b/style/components/tooltip.less
index d3f9e56199..e4e61fdc79 100644
--- a/style/components/tooltip.less
+++ b/style/components/tooltip.less
@@ -87,85 +87,83 @@
   &-placement-topLeft &-arrow,
   &-placement-topRight &-arrow {
     bottom: @tooltip-distance - @tooltip-arrow-width;
-    margin-left: -@tooltip-arrow-width;
     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
     border-top-color: @tooltip-arrow-color;
   }
 
   &-placement-top &-arrow {
     left: 50%;
+    margin-left: -@tooltip-arrow-width;
   }
 
   &-placement-topLeft &-arrow {
-    left: 15%;
+    left: 16px;
   }
 
   &-placement-topRight &-arrow {
-    right: 15%;
+    right: 16px;
   }
 
   &-placement-right &-arrow,
   &-placement-rightTop &-arrow,
   &-placement-rightBottom &-arrow {
     left: @tooltip-distance - @tooltip-arrow-width;
-    margin-top: -@tooltip-arrow-width;
     border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
     border-right-color: @tooltip-arrow-color;
   }
 
   &-placement-right &-arrow {
     top: 50%;
+    margin-top: -@tooltip-arrow-width;
   }
 
   &-placement-rightTop &-arrow {
-    top: 15%;
-    margin-top: 0;
+    top: 8px;
   }
 
   &-placement-rightBottom &-arrow {
-    bottom: 15%;
+    bottom: 8px;
   }
 
   &-placement-left &-arrow,
   &-placement-leftTop &-arrow,
   &-placement-leftBottom &-arrow {
     right: @tooltip-distance - @tooltip-arrow-width;
-    margin-top: -@tooltip-arrow-width;
     border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-left-color: @tooltip-arrow-color;
   }
 
   &-placement-left &-arrow {
     top: 50%;
+    margin-top: -@tooltip-arrow-width;
   }
 
   &-placement-leftTop &-arrow {
-    top: 15%;
-    margin-top: 0;
+    top: 8px;
   }
 
   &-placement-leftBottom &-arrow {
-    bottom: 15%;
+    bottom: 8px;
   }
 
   &-placement-bottom &-arrow,
   &-placement-bottomLeft &-arrow,
   &-placement-bottomRight &-arrow {
     top: @tooltip-distance - @tooltip-arrow-width;
-    margin-left: -@tooltip-arrow-width;
     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-bottom-color: @tooltip-arrow-color;
   }
 
   &-placement-bottom &-arrow {
     left: 50%;
+    margin-left: -@tooltip-arrow-width;
   }
 
   &-placement-bottomLeft &-arrow {
-    left: 15%;
+    left: 16px;
   }
 
   &-placement-bottomRight &-arrow {
-    right: 15%;
+    right: 16px;
   }
 }