diff --git a/source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache b/source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..9a9524c9500f234ee1137514ade12f15f98d28cd
--- /dev/null
+++ b/source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache
@@ -0,0 +1,10 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-tooltip(classes: "tooltip--black") }}
+    {{> atoms-tooltip(classes: "tooltip--grey-125") }}
+    {{> atoms-tooltip(classes: "tooltip--red-600") }}
+    {{> atoms-tooltip(classes: "tooltip--yellow-400") }}
+    {{> atoms-tooltip(classes: "tooltip--green-400") }}
+    {{> atoms-tooltip(classes: "tooltip--blue-300") }}
+  </div>
+</div>
diff --git a/source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache b/source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..9ad569a4f435fbf6ae815e183103b2e4db6f4e92
--- /dev/null
+++ b/source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache
@@ -0,0 +1,86 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--black tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--black tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--black tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--black tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--right") }}
+    </div>
+  </div>
+</div>
diff --git a/source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache b/source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..3952ace2f8c6a4a640b415a5b4614536ab5370f4
--- /dev/null
+++ b/source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache
@@ -0,0 +1,11 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-tooltip(classes: "tooltip--dark") }}
+    {{> atoms-tooltip(classes: "tooltip--light") }}
+    {{> atoms-tooltip(classes: "tooltip--default") }}
+    {{> atoms-tooltip(classes: "tooltip--error") }}
+    {{> atoms-tooltip(classes: "tooltip--warning") }}
+    {{> atoms-tooltip(classes: "tooltip--success") }}
+    {{> atoms-tooltip(classes: "tooltip--info") }}
+  </div>
+</div>
diff --git a/source/_patterns/00-atoms/16-tooltips/tooltip.mustache b/source/_patterns/00-atoms/16-tooltips/tooltip.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..10e38dfdab7c73025251c48c431990dab3ad70db
--- /dev/null
+++ b/source/_patterns/00-atoms/16-tooltips/tooltip.mustache
@@ -0,0 +1 @@
+<span class="tooltip {{ classes }} {{ pos }}{{^ pos }}tooltip--top{{/ pos }}">{{ cta }}</span>
diff --git a/source/css/atoms/tooltip.pcss b/source/css/atoms/tooltip.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..93ae46a69972a2a109811c10b649e1279780ebd6
--- /dev/null
+++ b/source/css/atoms/tooltip.pcss
@@ -0,0 +1,262 @@
+.tooltip {
+  --bg-opacity: 0.9 !important;
+  z-index: 999;
+
+  @apply inline-block relative pointer-events-none;
+
+  &::before,
+  &::after {
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    opacity: 0.9;
+  }
+
+  &,
+  &.tooltip--default {
+    @apply text-xs py-2 px-4 rounded-none;
+  }
+
+  &--top,
+  &.tooltip--top
+  &.place-top {
+    margin-top: -10px;
+
+    &::before {
+      border-top: 8px solid transparent;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      bottom: -8px;
+      left: 50%;
+      margin-left: -10px;
+    }
+
+    &::after {
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      bottom: -6px;
+      left: 50%;
+      margin-left: -8px;
+      border-top-style: solid;
+      border-top-width: 6px;
+    }
+  }
+
+  &--bottom,
+  &.tooltip--bottom,
+  &.place-bottom {
+    margin-top: 10px;
+
+    &::before {
+      border-bottom: 8px solid transparent;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      top: -8px;
+      left: 50%;
+      margin-left: -10px;
+    }
+
+    &::after {
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      top: -6px;
+      left: 50%;
+      margin-left: -8px;
+      border-bottom-style: solid;
+      border-bottom-width: 6px;
+    }
+  }
+
+  &--left,
+  &.tooltip--left,
+  &.place-left {
+    margin-left: -10px;
+    margin-top: 0;
+
+    &::before {
+      border-left: 8px solid transparent;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      right: -8px;
+      top: 50%;
+      margin-top: -5px;
+    }
+
+    &::after {
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      right: -6px;
+      top: 50%;
+      margin-top: -4px;
+      border-left-style: solid;
+      border-left-width: 6px;
+    }
+  }
+
+  &--right,
+  &.tooltip--right,
+  &.place-right {
+    margin-left: 10px;
+    margin-top: 0;
+
+    &::before {
+      border-right: 8px solid transparent;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      left: -8px;
+      top: 50%;
+      margin-top: -5px;
+    }
+
+    &::after {
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      left: -6px;
+      top: 50%;
+      margin-top: -4px;
+      border-right-style: solid;
+      border-right-width: 6px;
+    }
+  }
+
+  &,
+  &--default,
+  &--dark,
+  &.type-dark,
+  &--black {
+    @apply bg-black text-white;
+
+    &.place-top::after,
+    &.tooltip--top::after {
+      border-top-color: theme("colors.black");
+    }
+    &.place-bottom::after,
+    &.tooltip--bottom::after {
+      border-bottom-color: theme("colors.black");
+    }
+    &.place-left::after,
+    &.tooltip--left::after {
+      border-left-color: theme("colors.black");
+    }
+    &.place-right::after,
+    &.tooltip--right::after {
+      border-right-color: theme("colors.black");
+    }
+  }
+
+  &--error,
+  &.type-error,
+  &--red-600 {
+    @apply bg-red-600 text-white;
+
+    &.place-top::after,
+    &.tooltip--top::after {
+      border-top-color: theme("colors.red.600");
+    }
+    &.place-bottom::after,
+    &.tooltip--bottom::after {
+      border-bottom-color: theme("colors.red.600");
+    }
+    &.place-left::after,
+    &.tooltip--left::after {
+      border-left-color: theme("colors.red.600");
+    }
+    &.place-right::after,
+    &.tooltip--right::after {
+      border-right-color: theme("colors.red.600");
+    }
+  }
+
+  &--warning,
+  &.type-warning,
+  &--yellow-400 {
+    @apply bg-yellow-400 text-black;
+
+    &.place-top::after,
+    &.tooltip--top::after {
+      border-top-color: theme("colors.yellow.400");
+    }
+    &.place-bottom::after,
+    &.tooltip--bottom::after {
+      border-bottom-color: theme("colors.yellow.400");
+    }
+    &.place-left::after,
+    &.tooltip--left::after {
+      border-left-color: theme("colors.yellow.400");
+    }
+    &.place-right::after,
+    &.tooltip--right::after {
+      border-right-color: theme("colors.yellow.400");
+    }
+  }
+
+  &--info,
+  &.type-info,
+  &--blue-300 {
+    @apply bg-blue-300 text-white;
+
+    &.place-top::after,
+    &.tooltip--top::after {
+      border-top-color: theme("colors.blue.300");
+    }
+    &.place-bottom::after,
+    &.tooltip--bottom::after {
+      border-bottom-color: theme("colors.blue.300");
+    }
+    &.place-left::after,
+    &.tooltip--left::after {
+      border-left-color: theme("colors.blue.300");
+    }
+    &.place-right::after,
+    &.tooltip--right::after {
+      border-right-color: theme("colors.blue.300");
+    }
+  }
+
+  &--grey-125,
+  &--light,
+  &.type-light {
+    @apply bg-grey-125 text-grey-300;
+
+    &.place-top::after,
+    &.tooltip--top::after {
+      border-top-color: theme("colors.grey.125");
+    }
+    &.place-bottom::after,
+    &.tooltip--bottom::after {
+      border-bottom-color: theme("colors.grey.125");
+    }
+    &.place-left::after,
+    &.tooltip--left::after {
+      border-left-color: theme("colors.grey.125");
+    }
+    &.place-right::after,
+    &.tooltip--right::after {
+      border-right-color: theme("colors.grey.125");
+    }
+  }
+
+  &--green-400,
+  &--success,
+  &.type-success {
+    @apply bg-green-400 text-white;
+
+    &.place-top::after,
+    &.tooltip--top::after {
+      border-top-color: theme("colors.green.400");
+    }
+    &.place-bottom::after,
+    &.tooltip--bottom::after {
+      border-bottom-color: theme("colors.green.400");
+    }
+    &.place-left::after,
+    &.tooltip--left::after {
+      border-left-color: theme("colors.green.400");
+    }
+    &.place-right::after,
+    &.tooltip--right::after {
+      border-right-color: theme("colors.green.400");
+    }
+  }
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index fab7d9a8decb1864b3d6084509a793ce3762988c..18db66fbcf208f412e0c5b64c4165654f8fca975 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -35,6 +35,7 @@
 @import "./atoms/social-icon.pcss";
 @import "./atoms/super-button.pcss";
 @import "./atoms/table.pcss";
+@import "./atoms/tooltip.pcss";
 
 @import "./molecules/article-card.pcss";
 @import "./molecules/badge.pcss";