diff --git a/components/tooltip/_config.scss b/components/tooltip/_config.scss
index c29f4c41..497dee2f 100644
--- a/components/tooltip/_config.scss
+++ b/components/tooltip/_config.scss
@@ -1,4 +1,5 @@
 $tooltip-background: rgba(97,97,97,.9);
+$tooltip-margin: 0.5 * $unit;
 $tooltip-border-radius: .2 * $unit;
 $tooltip-color: #fff;
 $tooltip-font-size: $unit;
diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx
index 2c07add9..01e5e273 100644
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@@ -22,8 +22,10 @@ class Tooltip extends React.Component {
     const parent = node.parentNode;
     if (parent) {
       parent.onmouseover = () => {
+        const parentStyle =  parent.currentStyle || window.getComputedStyle(parent);
+        const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
         const position = parent.getBoundingClientRect();
-        node.style.top = `${position.top + position.height}px`;
+        node.style.top = `${position.top + position.height - offset}px`;
         node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
         if (!this.state.active) this.setState({ active: true});
       };
diff --git a/components/tooltip/style.scss b/components/tooltip/style.scss
index 75e3d960..d9e60232 100644
--- a/components/tooltip/style.scss
+++ b/components/tooltip/style.scss
@@ -7,8 +7,8 @@
   z-index: $z-index-higher;
   display: inline-block;
   max-width: $tooltip-max-width;
-  margin-top: 10px;
   padding: $tooltip-padding;
+  margin: $tooltip-margin 0;
   font-size: $font-size-tiny;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
@@ -27,10 +27,9 @@
     animation-name: tooltip-animation;
   }
   &.large {
-    font-size: $font-size-small;
     padding: 2 * $tooltip-padding;
+    font-size: $font-size-small;
   }
-
   @keyframes tooltip-animation {
     0% {
       transform: scale(0);