diff --git a/packages/ui-toolkit/src/popover/index.js b/packages/ui-toolkit/src/popover/index.js
index 1c9679d0..3e1f0db1 100644
--- a/packages/ui-toolkit/src/popover/index.js
+++ b/packages/ui-toolkit/src/popover/index.js
@@ -17,7 +17,7 @@ const Popper = styled(BasePopper)`
   box-shadow: 0 ${remcalc(2)} ${remcalc(6)} rgba(0, 0, 0, 0.1);
   border: ${remcalc(1)} solid ${props => props.theme.grey};
 
-  padding: ${remcalc(15)} ${remcalc(18)};
+  padding: ${remcalc(15)} ${remcalc(18)} ${remcalc(3)} ${remcalc(18)};
 
   ${style({
     background: 'white',
diff --git a/packages/ui-toolkit/src/tooltip/style.js b/packages/ui-toolkit/src/tooltip/style.js
index 866dd006..68e1ef5e 100644
--- a/packages/ui-toolkit/src/tooltip/style.js
+++ b/packages/ui-toolkit/src/tooltip/style.js
@@ -27,12 +27,16 @@ export default ({ background, color, border, arrow }) => css`
     margin-bottom: 0;
 
     &:after {
+      content: '';
+      display: block;
+      position: absolute;
       border-width: ${remcalc(7)} ${remcalc(7)} 0 ${remcalc(7)};
-      border-color: ${props => props.theme[background]} transparent transparent
+      border-color: ${props => props.theme[border]} transparent transparent
         transparent;
-      bottom: ${remcalc(-6)};
-      margin-top: 0;
-      margin-bottom: 0;
+      border-style: solid;
+      left: ${remcalc(-7)};
+      top: ${remcalc(-6)};
+      z-index: -1;
     }
   }
 
@@ -44,6 +48,21 @@ export default ({ background, color, border, arrow }) => css`
     top: ${remcalc(-6)};
     margin-top: 0;
     margin-bottom: 0;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      border-width: 0 ${remcalc(7)} ${remcalc(7)} ${remcalc(7)};
+      border-color: transparent transparent ${props => props.theme[border]}
+        transparent;
+      border-style: solid;
+      top: ${remcalc(-1)};
+      left: ${remcalc(-7)};
+      margin-top: 0;
+      margin-bottom: 0;
+      z-index: -1;
+    }
   }
 
   /* top & bottom */