diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
index 8efcf065..6b42981f 100644
--- a/src/components/tooltip/Tooltip.js
+++ b/src/components/tooltip/Tooltip.js
@@ -65,11 +65,8 @@ const TooltipWrapper = styled.div`
       margin-left: ${ifPlacementEquals('right', ArrowSpacing + 2)}px;
       margin-right: ${ifPlacementEquals('left', ArrowSpacing + 2)}px;
 
-      background-image: linear-gradient(
-        -1deg,
-        rgba(248, 248, 248, 0.97) 0%,
-        rgba(255, 255, 255, 0.97) 100%
-      );
+      background: rgba(255, 255, 255, 0.97);
+
       filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.05)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
       border-radius: ${spacing.borderRadius.small}px;
       font-size: ${typography.size.s1}px;
diff --git a/src/components/tooltip/Tooltip.stories.js b/src/components/tooltip/Tooltip.stories.js
index 35e1dc43..a2d274fd 100644
--- a/src/components/tooltip/Tooltip.stories.js
+++ b/src/components/tooltip/Tooltip.stories.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Tooltip } from './Tooltip';
 
 // Popper would position the tooltip absolutely. We just need to make sure we are pos:rel
-const mockPopperProps = { style: { position: 'relative', top: '20px', left: '20px' } };
+const mockPopperProps = { style: { position: 'relative', top: '0px', left: '0px' } };
 
 const Content = styled.div`
   width: 100px;
@@ -11,12 +11,17 @@ const Content = styled.div`
   font-size: 16px;
   text-align: center;
   line-height: 100px;
-  background: #eee;
+  outline: 1px dotted red;
 `;
 
 export default {
   title: 'tooltip/Tooltip',
   component: Tooltip,
+  decorators: [
+    (storyFn) => (
+      <div style={{ padding: '1em', background: '#eee', display: 'inline-block' }}>{storyFn()}</div>
+    ),
+  ],
 };
 
 export const basicDefault = () => (