diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot
index 60395bd..051e7c5 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..c7112e7 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..1e0eba1 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
new file mode 100644
index 0000000..8eed3b7
--- /dev/null
+++ b/src/scss/cdb-components/tooltips.scss
@@ -0,0 +1,148 @@
+// Tooltip
+// ----------------------------------------------
+
+/* SG
+# Tooltip
+
+
+```
+<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>
+
+<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>
+
+<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>
+
+<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-utilities/mixins';
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
+
+
+.CDB-Tooltip {
+  display: inline-block;
+  position: absolute;
+  padding: $baseSize;
+  border-radius: $halfBaseSize;
+  background: rgba($cMainBg, 0.8);
+}
+.CDB-Tooltip::after {
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  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-text {
+  color: $cWhite;
+}