diff --git a/src/decorators/styler.js b/src/decorators/styler.js
index e7f2fd32f..4cad7c3ad 100755
--- a/src/decorators/styler.js
+++ b/src/decorators/styler.js
@@ -56,8 +56,8 @@ function generateStyle(
         background-color: inherit;
         position: absolute;
         z-index: 2;
-        width: 18px;
-        height: 10px;
+        width: 20px;
+        height: 12px;
     }
     .${uuid}.place-top::after {
         content: "";
@@ -70,7 +70,7 @@ function generateStyle(
         z-index: 1;
         bottom: -6px;
         left: 50%;
-        margin-left: -8px;
+        margin-left: -6px;
         transform: rotate(135deg);
     }
 
@@ -96,7 +96,7 @@ function generateStyle(
         z-index: 1;
         top: -6px;
         left: 50%;
-        margin-left: -8px;
+        margin-left: -6px;
         transform: rotate(45deg);
     }
 
diff --git a/test/index.spec.js b/test/index.spec.js
index bc17a64a5..562c09d7f 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -88,8 +88,13 @@ describe('Tooltip', () => {
       }
     ],
     [
-      { textColor: 'teal', backgroundColor: 'orange' },
-      { popupType: 'type-custom', textColor: 'teal', background: 'orange' }
+      { textColor: 'teal', backgroundColor: 'orange', arrowColor: 'orange' },
+      {
+        popupType: 'type-custom',
+        textColor: 'teal',
+        background: 'orange',
+        arrowColor: 'orange'
+      }
     ],
     [
       { textColor: 'green', arrowColor: 'red' },
@@ -185,7 +190,8 @@ describe('Tooltip', () => {
         border: true,
         borderColor: 'blue',
         arrowRadius: '2',
-        tooltipRadius: '4'
+        tooltipRadius: '4',
+        arrowColor: '#222'
       },
       {
         popupType: 'type-custom',
@@ -201,7 +207,8 @@ describe('Tooltip', () => {
       {
         border: true,
         borderClass: 'custom-border-class',
-        borderColor: '#414141'
+        borderColor: '#414141',
+        arrowColor: '#222'
       },
       {
         borderColor: '#414141',