diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot
index 60395bd..0b1791b 100644
Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ
diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf
index 762ed42..b1ef9c8 100644
Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ
diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff
index 7fe2d58..7a09d70 100644
Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ
diff --git a/src/scss/cdb-components/tooltips.scss b/src/scss/cdb-components/tooltips.scss
index e60bf53..8ab7b71 100644
--- a/src/scss/cdb-components/tooltips.scss
+++ b/src/scss/cdb-components/tooltips.scss
@@ -1,85 +1,148 @@
-// Typography styles
+// Tooltip
 // ----------------------------------------------
 
 /* SG
-# Tooltips
+# Tooltip
+
 
 ```
-<div style="height: 100px; position: relative;">
-  <div class="CDB-Tooltip is-top u-iBlock CDB-Text CDB-Size-medium">
-    <p>627K Transactions</p>
+<div style="position: relative; height: 100px;">
+  <div class="CDB-Tooltip CDB-Tooltip--up is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
   </div>
 </div>
 
-<br/>
-<br/>
-<br/>
-<br/>
-
-<div style="height: 100px; position: relative;">
-  <div class="CDB-Tooltip is-top is-error u-iBlock CDB-Text CDB-Size-medium">
-    <p>Hello I am a Form error</p>
+<div style="position: relative; height: 100px;">
+  <div class="CDB-Tooltip CDB-Tooltip--up is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
   </div>
 </div>
 
-<br/>
-<br/>
-<br/>
-<br/>
-
-<div style="height: 100px; position: relative;">
-  <div class="CDB-Tooltip is-bottom u-iBlock CDB-Text CDB-Size-medium">
-    <p>627K Transactions</p>
+<div style="position: relative; height: 100px;">
+  <div class="CDB-Tooltip CDB-Tooltip--down is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
   </div>
 </div>
 
-<br/>
-<br/>
-<br/>
-<br/>
-
-<div style="height: 100px; position: relative;">
-  <div class="CDB-Tooltip is-bottom is-error u-iBlock CDB-Text CDB-Size-medium">
-    <p>Hello I am a Form error</p>
+<div style="position: relative; height: 100px;">
+  <div class="CDB-Tooltip CDB-Tooltip--down is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
   </div>
 </div>
 
+<div style="position: relative; height: 100px;">
+  <div class="CDB-Tooltip CDB-Tooltip--left is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-Tooltip CDB-Tooltip--left is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-Tooltip CDB-Tooltip--right is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-Tooltip CDB-Tooltip--right is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
+  </div>
+</div>
 
 
 
 ```
 */
 
-@import '../cdb-variables/sizes';
+@import '../cdb-utilities/mixins';
 @import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
 
 
 .CDB-Tooltip {
+  display: inline-block;
   position: absolute;
-  padding: 8px;
-  border-radius: 4px;
+  padding: $baseSize;
+  border-radius: $halfBaseSize;
   background: rgba($cMainBg, 0.8);
-  color: $cWhite;
 }
-
-.CDB-Tooltip:before {
+.CDB-Tooltip:after {
   display: block;
   position: absolute;
-  top: -12px;
-  left: calc(50% - 6px);
   width: 0;
   height: 0;
-  border: 6px solid transparent;
-  border-bottom: 6px solid rgba($cMainBg, 0.8);
+  border: 4px solid transparent;
   content: '';
 }
 
+.is-black {
+  &.CDB-Tooltip.CDB-Tooltip--up:after {
+    border-bottom-color: rgba($cMainBg, 0.8);
+  }
+  &.CDB-Tooltip.CDB-Tooltip--down:after {
+    border-top-color: rgba($cMainBg, 0.8);
+  }
+  &.CDB-Tooltip.CDB-Tooltip--left:after {
+    border-right-color: rgba($cMainBg, 0.8);
+  }
+  &.CDB-Tooltip.CDB-Tooltip--right:after {
+    border-left-color: rgba($cMainBg, 0.8);
+  }
+}
+
+.is-error {
+  &.CDB-Tooltip.CDB-Tooltip--up:after {
+    border-bottom-color: $cError;
+  }
+  &.CDB-Tooltip.CDB-Tooltip--down:after {
+    border-top-color: $cError;
+  }
+  &.CDB-Tooltip.CDB-Tooltip--left:after {
+    border-right-color: $cError;
+  }
+  &.CDB-Tooltip.CDB-Tooltip--right:after {
+    border-left-color: $cError;
+  }
+}
+
+.CDB-Tooltip.CDB-Tooltip--up:after {
+  top: -$baseSize;
+  left: calc(50% - #{$halfBaseSize});
+  border-top-width: $halfBaseSize;
+  border-top-style: solid;
+}
+
+.CDB-Tooltip.CDB-Tooltip--down:after {
+  bottom: -$baseSize;
+  left: calc(50% - #{$halfBaseSize});
+  border-top-width: $halfBaseSize;
+  border-top-style: solid;
+}
+
+.CDB-Tooltip.CDB-Tooltip--left:after {
+  top: calc(50% - #{$halfBaseSize});
+  left: -$baseSize;
+  border-right-width: $halfBaseSize;
+  border-right-style: solid;
+}
+
+.CDB-Tooltip.CDB-Tooltip--right:after {
+  top: calc(50% - #{$halfBaseSize});
+  right: -$baseSize;
+  border-right-width: $halfBaseSize;
+  border-right-style: solid;
+}
+
 .CDB-Tooltip.is-error {
   background: $cError;
 }
 
-.CDB-Tooltip.is-error:before {
-  border-bottom: 6px solid $cError;
+.CDB-Tooltip-text {
+  color: $cWhite;
 }
-
-