diff --git a/src/components/Table/__snapshots__/Table.stories.storyshot b/src/components/Table/__snapshots__/Table.stories.storyshot
index 0486bc9f2..1bf2058e1 100644
--- a/src/components/Table/__snapshots__/Table.stories.storyshot
+++ b/src/components/Table/__snapshots__/Table.stories.storyshot
@@ -3242,25 +3242,29 @@ exports[`Storyshots Design System/Table Regular Table with sorting and tooltips
 }
 
 .emotion-9 {
-  background: transparent;
+  background-color: #1B214F;
+  border: 0.0625rem solid rgba(84,94,255,0);
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
 }
 
 .emotion-9 .tippy-content {
-  color: white;
-  background-color: #0f0f17;
+  background-color: #1B214F;
   max-width: 16rem;
   padding: 0.5rem;
-  font-size: 0.875rem;
+  border-radius: 0.25rem;
+  color: #ffffff;
+  font-family: Roboto;
   font-weight: 400;
-  line-height: 110%;
-  border-radius: 0.5rem;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
   text-align: start;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
-.emotion-9 .tippy-arrow {
-  color: #0f0f17;
+.emotion-9 .tippy-arrow::before {
+  color: #1B214F;
 }
 
 .emotion-10 {
@@ -3425,9 +3429,15 @@ exports[`Storyshots Design System/Table Regular Table with sorting and tooltips
                   className="emotion-8"
                 >
                   <div
+                    arrow={true}
                     className="emotion-9"
+                    delay={
+                      Array [
+                        500,
+                        500,
+                      ]
+                    }
                     interactive={false}
-                    interactiveDebounce={100}
                     placement="bottom"
                   >
                     <span
@@ -3492,10 +3502,16 @@ exports[`Storyshots Design System/Table Regular Table with sorting and tooltips
                   className="emotion-8"
                 >
                   <div
+                    arrow={true}
                     className="emotion-9"
+                    delay={
+                      Array [
+                        500,
+                        500,
+                      ]
+                    }
                     interactive={false}
-                    interactiveDebounce={100}
-                    placement="top"
+                    placement="right"
                   >
                     <span
                       className="emotion-10"
@@ -3548,9 +3564,15 @@ exports[`Storyshots Design System/Table Regular Table with sorting and tooltips
                   className="emotion-8"
                 >
                   <div
+                    arrow={true}
                     className="emotion-9"
+                    delay={
+                      Array [
+                        500,
+                        500,
+                      ]
+                    }
                     interactive={false}
-                    interactiveDebounce={100}
                     placement="right"
                   >
                     <span
@@ -23682,25 +23704,29 @@ exports[`Storyshots Design System/Table Table with expandable rows and sortDir 1
 }
 
 .emotion-21 {
-  background: transparent;
+  background-color: #1B214F;
+  border: 0.0625rem solid rgba(84,94,255,0);
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
 }
 
 .emotion-21 .tippy-content {
-  color: white;
-  background-color: #0f0f17;
+  background-color: #1B214F;
   max-width: 16rem;
   padding: 0.5rem;
-  font-size: 0.875rem;
+  border-radius: 0.25rem;
+  color: #ffffff;
+  font-family: Roboto;
   font-weight: 400;
-  line-height: 110%;
-  border-radius: 0.5rem;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
   text-align: start;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
-.emotion-21 .tippy-arrow {
-  color: #0f0f17;
+.emotion-21 .tippy-arrow::before {
+  color: #1B214F;
 }
 
 .emotion-23 {
@@ -24050,9 +24076,15 @@ exports[`Storyshots Design System/Table Table with expandable rows and sortDir 1
                   className="emotion-20"
                 >
                   <div
+                    arrow={true}
                     className="emotion-21"
+                    delay={
+                      Array [
+                        500,
+                        500,
+                      ]
+                    }
                     interactive={false}
-                    interactiveDebounce={100}
                     placement="bottom"
                   >
                     <span
@@ -24117,10 +24149,16 @@ exports[`Storyshots Design System/Table Table with expandable rows and sortDir 1
                   className="emotion-20"
                 >
                   <div
+                    arrow={true}
                     className="emotion-21"
+                    delay={
+                      Array [
+                        500,
+                        500,
+                      ]
+                    }
                     interactive={false}
-                    interactiveDebounce={100}
-                    placement="top"
+                    placement="right"
                   >
                     <span
                       className="emotion-9"
@@ -24173,9 +24211,15 @@ exports[`Storyshots Design System/Table Table with expandable rows and sortDir 1
                   className="emotion-20"
                 >
                   <div
+                    arrow={true}
                     className="emotion-21"
+                    delay={
+                      Array [
+                        500,
+                        500,
+                      ]
+                    }
                     interactive={false}
-                    interactiveDebounce={100}
                     placement="right"
                   >
                     <span
diff --git a/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot b/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot
index 509d5e049..a624a0744 100644
--- a/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot
+++ b/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Design System/Tooltip Generic Tooltip 1`] = `
+exports[`Storyshots Design System/Tooltip Interactive Tooltip 1`] = `
 .emotion-0 {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -17,69 +17,728 @@ exports[`Storyshots Design System/Tooltip Generic Tooltip 1`] = `
 }
 
 .emotion-2 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.emotion-3 {
+  background-color: #1B214F;
+  border: 0.0625rem solid rgba(84,94,255,0);
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
+}
+
+.emotion-3 .tippy-content {
+  background-color: #1B214F;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+
+.emotion-3 .tippy-arrow::before {
+  color: #1B214F;
+}
+
+.emotion-4 {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.emotion-5 {
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #ffffff;
+  background-color: #175bf5;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: none;
+  cursor: pointer;
+  -webkit-transition: background-color,border 150ms linear;
+  transition: background-color,border 150ms linear;
+}
+
+.emotion-5:focus-visible:not(:disabled) {
+  background-color: #1552DD;
+}
+
+.emotion-5:disabled {
+  opacity: 50%;
+  cursor: not-allowed;
+}
+
+.emotion-5:hover:not(:disabled) {
+  background-color: #1552DD;
+}
+
+.emotion-5:active:not(:disabled) {
+  background-color: #1249C4;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
+  gap: 0.5rem;
+}
+
+.emotion-8 {
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #1B214F;
+  background-color: #1de9b6;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: none;
+  cursor: pointer;
+  -webkit-transition: background-color,border 150ms linear;
+  transition: background-color,border 150ms linear;
+}
+
+.emotion-8:focus-visible:not(:disabled) {
+  background-color: #00C6A2;
+}
+
+.emotion-8:disabled {
+  opacity: 50%;
+  cursor: not-allowed;
+}
+
+.emotion-8:hover:not(:disabled) {
+  background-color: #00C6A2;
+}
+
+.emotion-8:active:not(:disabled) {
+  background-color: #0C7D61;
+}
+
+.emotion-10 {
+  background: #1B214F;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.emotion-11 {
+  background-color: #ffffff;
+  border: 0.0625rem solid #E7E8FF;
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
+}
+
+.emotion-11 .tippy-content {
+  background-color: #ffffff;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+
+.emotion-11 .tippy-arrow::before {
+  color: #ffffff;
+}
+
+<div
+  className="emotion-0"
+>
+  <div
+    className="emotion-1"
+  >
+    <div
+      className="emotion-2"
+    >
+      <div
+        style={
+          Object {
+            "margin": 5,
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "padding": "48px",
+            }
+          }
+        >
+          <div
+            arrow={false}
+            className="emotion-3"
+            delay={
+              Array [
+                500,
+                500,
+              ]
+            }
+            interactive={true}
+            placement="right"
+          >
+            <div
+              className="emotion-4"
+            >
+              <button
+                className="emotion-5"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="emotion-6"
+                >
+                  <span>
+                    Hover here
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div>
+            <div
+              style={
+                Object {
+                  "alignItems": "center",
+                  "background": "#434666",
+                  "border": "#DCDFFF",
+                  "borderRadius": "4px",
+                  "color": "white",
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "justifyContent": "center",
+                  "padding": "8px",
+                  "width": "240px",
+                }
+              }
+            >
+              <div>
+                This container is custom content
+              </div>
+              <div
+                className="emotion-4"
+              >
+                <button
+                  className="emotion-8"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="emotion-6"
+                  >
+                    <span>
+                      Hello there mate
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="emotion-10"
+    >
+      <div
+        style={
+          Object {
+            "margin": 5,
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "padding": "48px",
+            }
+          }
+        >
+          <div
+            arrow={false}
+            className="emotion-11"
+            delay={
+              Array [
+                500,
+                500,
+              ]
+            }
+            interactive={true}
+            placement="right"
+          >
+            <div
+              className="emotion-4"
+            >
+              <button
+                className="emotion-8"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="emotion-6"
+                >
+                  <span>
+                    Hover here
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div>
+            <div
+              style={
+                Object {
+                  "alignItems": "center",
+                  "background": "#DCDFFF",
+                  "border": "#DCDFFF",
+                  "borderRadius": "4px",
+                  "color": "black",
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "justifyContent": "center",
+                  "padding": "8px",
+                  "width": "240px",
+                }
+              }
+            >
+              <div>
+                This container is custom content
+              </div>
+              <div
+                className="emotion-4"
+              >
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="emotion-6"
+                  >
+                    <span>
+                      Hello there mate
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Design System/Tooltip Playground 1`] = `
+.emotion-0 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  position: relative;
+  padding: 0.25rem;
+}
+
+.emotion-1 {
+  margin: 1rem;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.emotion-3 {
+  background-color: #1B214F;
+  border: 0.0625rem solid rgba(84,94,255,0);
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
+}
+
+.emotion-3 .tippy-content {
+  background-color: #1B214F;
+  max-width: 16rem;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  color: #ffffff;
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
+  text-align: start;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.emotion-3 .tippy-arrow::before {
+  color: #1B214F;
+}
+
+.emotion-4 {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.emotion-5 {
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #ffffff;
+  background-color: #175bf5;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: none;
+  cursor: pointer;
+  -webkit-transition: background-color,border 150ms linear;
+  transition: background-color,border 150ms linear;
+}
+
+.emotion-5:focus-visible:not(:disabled) {
+  background-color: #1552DD;
+}
+
+.emotion-5:disabled {
+  opacity: 50%;
+  cursor: not-allowed;
+}
+
+.emotion-5:hover:not(:disabled) {
+  background-color: #1552DD;
+}
+
+.emotion-5:active:not(:disabled) {
+  background-color: #1249C4;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  height: 15.625rem;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.emotion-7 {
+  background-color: #1B214F;
+  border: 0.0625rem solid rgba(84,94,255,0);
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
+}
+
+.emotion-7 .tippy-content {
+  background-color: #1B214F;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+
+.emotion-7 .tippy-arrow::before {
+  color: #1B214F;
+}
+
+.emotion-12 {
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #1B214F;
+  background-color: #1de9b6;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: none;
+  cursor: pointer;
+  -webkit-transition: background-color,border 150ms linear;
+  transition: background-color,border 150ms linear;
+}
+
+.emotion-12:focus-visible:not(:disabled) {
+  background-color: #00C6A2;
+}
+
+.emotion-12:disabled {
+  opacity: 50%;
+  cursor: not-allowed;
+}
+
+.emotion-12:hover:not(:disabled) {
+  background-color: #00C6A2;
+}
+
+.emotion-12:active:not(:disabled) {
+  background-color: #0C7D61;
+}
+
+<div
+  className="emotion-0"
+>
+  <div
+    className="emotion-1"
+  >
+    <div
+      className="emotion-2"
+    >
+      <div
+        style={
+          Object {
+            "margin": 5,
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "alignItems": "center",
+              "display": "flex",
+              "gap": "128px",
+              "height": "200px",
+              "justifyContent": "center",
+              "padding": "16px",
+              "width": "600px",
+            }
+          }
+        >
+          <div
+            arrow={true}
+            className="emotion-3"
+            delay={
+              Array [
+                100,
+                100,
+              ]
+            }
+            interactive={false}
+            placement="right"
+          >
+            <div
+              className="emotion-4"
+            >
+              <button
+                className="emotion-5"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="emotion-6"
+                >
+                  <span>
+                    Text
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div>
+            This is a Tooltip
+          </div>
+          <div
+            style={
+              Object {
+                "padding": "48px",
+              }
+            }
+          >
+            <div
+              arrow={false}
+              className="emotion-7"
+              delay={
+                Array [
+                  100,
+                  100,
+                ]
+              }
+              interactive={true}
+              placement="right"
+            >
+              <div
+                className="emotion-4"
+              >
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="emotion-6"
+                  >
+                    <span>
+                      Interactive
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div>
+              <div
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "background": "#434666",
+                    "border": "#DCDFFF",
+                    "borderRadius": "4px",
+                    "color": "white",
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "justifyContent": "center",
+                    "padding": "8px",
+                    "width": "240px",
+                  }
+                }
+              >
+                <div>
+                  This container is custom content
+                </div>
+                <div
+                  className="emotion-4"
+                >
+                  <button
+                    className="emotion-12"
+                    data-testid="button"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="emotion-6"
+                    >
+                      <span>
+                        Hello there mate
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Design System/Tooltip Text Tooltip 1`] = `
+.emotion-0 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  position: relative;
+  padding: 0.25rem;
 }
 
-.emotion-3 {
+.emotion-1 {
+  margin: 1rem;
+}
+
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 12.5rem;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  margin-bottom: 3rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
-.emotion-4 {
-  background: transparent;
+.emotion-3 {
+  background-color: #1B214F;
+  border: 0.0625rem solid rgba(84,94,255,0);
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
 }
 
-.emotion-4 .tippy-content {
-  color: white;
-  background-color: #0f0f17;
+.emotion-3 .tippy-content {
+  background-color: #1B214F;
   max-width: 16rem;
   padding: 0.5rem;
-  font-size: 0.875rem;
+  border-radius: 0.25rem;
+  color: #ffffff;
+  font-family: Roboto;
   font-weight: 400;
-  line-height: 110%;
-  border-radius: 0.5rem;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
   text-align: start;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
-.emotion-4 .tippy-arrow {
-  color: #0f0f17;
+.emotion-3 .tippy-arrow::before {
+  color: #1B214F;
 }
 
-.emotion-5 {
+.emotion-4 {
   position: relative;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
 
-.emotion-6 {
+.emotion-5 {
   font-family: Roboto;
   font-weight: 500;
   line-height: 1.25rem;
@@ -95,24 +754,24 @@ exports[`Storyshots Design System/Tooltip Generic Tooltip 1`] = `
   transition: background-color,border 150ms linear;
 }
 
-.emotion-6:focus-visible:not(:disabled) {
+.emotion-5:focus-visible:not(:disabled) {
   background-color: #1552DD;
 }
 
-.emotion-6:disabled {
+.emotion-5:disabled {
   opacity: 50%;
   cursor: not-allowed;
 }
 
-.emotion-6:hover:not(:disabled) {
+.emotion-5:hover:not(:disabled) {
   background-color: #1552DD;
 }
 
-.emotion-6:active:not(:disabled) {
+.emotion-5:active:not(:disabled) {
   background-color: #1249C4;
 }
 
-.emotion-7 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -128,102 +787,78 @@ exports[`Storyshots Design System/Tooltip Generic Tooltip 1`] = `
   gap: 0.5rem;
 }
 
-.emotion-21 {
-  background: transparent;
+.emotion-7 {
+  background: #1B214F;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.emotion-8 {
+  background-color: #ffffff;
+  border: 0.0625rem solid #E7E8FF;
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
 }
 
-.emotion-21 .tippy-content {
-  color: white;
-  background-color: transparent;
+.emotion-8 .tippy-content {
+  background-color: #ffffff;
   max-width: 16rem;
   padding: 0.5rem;
-  font-size: 0.875rem;
+  border-radius: 0.25rem;
+  color: #1B214F;
+  font-family: Roboto;
   font-weight: 400;
-  line-height: 110%;
-  border-radius: 0.5rem;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
   text-align: start;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
-.emotion-21 .tippy-arrow {
-  color: transparent;
-}
-
-.emotion-25 {
-  box-shadow: 0px 4px 8px rgba(16, 48, 102, 0.07);
-  background: white;
-  border-radius: 0.25rem;
+.emotion-8 .tippy-arrow::before {
+  color: #ffffff;
 }
 
-.emotion-26 {
-  padding: 1rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+.emotion-10 {
+  font-family: Roboto;
   font-weight: 500;
-  height: 200px;
-}
-
-.emotion-27 {
-  margin-bottom: 0.5rem;
-  color: black;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #1B214F;
+  background-color: #1de9b6;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: none;
+  cursor: pointer;
+  -webkit-transition: background-color,border 150ms linear;
+  transition: background-color,border 150ms linear;
 }
 
-.emotion-28 {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 1.5rem;
-  border-radius: 1.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: normal;
-  box-sizing: border-box;
-  padding: 0.25rem 0.5rem;
-  background-color: #e8fcf7;
-  color: black;
-  border: 0.0625rem solid #1ad1a3;
-  cursor: auto;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  -webkit-transition: background-color 150ms linear;
-  transition: background-color 150ms linear;
+.emotion-10:focus-visible:not(:disabled) {
+  background-color: #00C6A2;
 }
 
-.emotion-28:hover:not(:disabled) {
-  background: #d1faf0;
+.emotion-10:disabled {
+  opacity: 50%;
+  cursor: not-allowed;
 }
 
-.emotion-28:focus-visible:not(:disabled) {
-  outline: none;
+.emotion-10:hover:not(:disabled) {
+  background-color: #00C6A2;
 }
 
-.emotion-28>:not(:last-child) {
-  margin-right: 0.25rem;
+.emotion-10:active:not(:disabled) {
+  background-color: #0C7D61;
 }
 
 <div
@@ -235,188 +870,110 @@ exports[`Storyshots Design System/Tooltip Generic Tooltip 1`] = `
     <div
       className="emotion-2"
     >
-      <h2>
-        Tooltip with text-only content
-      </h2>
-      <div
-        className="emotion-3"
-      >
-        <div
-          className="emotion-4"
-          interactive={false}
-          interactiveDebounce={100}
-          placement="left"
-        >
-          <div
-            className="emotion-5"
-          >
-            <button
-              className="emotion-6"
-              data-testid="button"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              <span
-                className="emotion-7"
-              >
-                <span>
-                  Left
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-        <div>
-          By hovering here you can see very long and useful info that totally breaks into two lines
-        </div>
-        <div
-          className="emotion-4"
-          interactive={false}
-          interactiveDebounce={100}
-          placement="right"
-        >
-          <div
-            className="emotion-5"
-          >
-            <button
-              className="emotion-6"
-              data-testid="button"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              <span
-                className="emotion-7"
-              >
-                <span>
-                  Right
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-        <div>
-          By hovering here you can see very long and useful info that totally breaks into two lines
-        </div>
-      </div>
       <div
-        className="emotion-3"
+        style={
+          Object {
+            "margin": 5,
+          }
+        }
       >
         <div
-          className="emotion-4"
-          interactive={false}
-          interactiveDebounce={100}
-          placement="top"
+          style={
+            Object {
+              "padding": "16px",
+            }
+          }
         >
           <div
-            className="emotion-5"
+            arrow={true}
+            className="emotion-3"
+            delay={
+              Array [
+                500,
+                500,
+              ]
+            }
+            interactive={false}
+            placement="right"
           >
-            <button
-              className="emotion-6"
-              data-testid="button"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
+            <div
+              className="emotion-4"
             >
-              <span
-                className="emotion-7"
+              <button
+                className="emotion-5"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
               >
-                <span>
-                  Top
+                <span
+                  className="emotion-6"
+                >
+                  <span>
+                    Hover here
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
-        </div>
-        <div>
-          By hovering here you can see very long and useful info that totally breaks into two lines
-        </div>
-        <div
-          className="emotion-4"
-          interactive={false}
-          interactiveDebounce={100}
-          placement="bottom"
-        >
-          <div
-            className="emotion-5"
-          >
-            <button
-              className="emotion-6"
-              data-testid="button"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              <span
-                className="emotion-7"
-              >
-                <span>
-                  Bottom
-                </span>
-              </span>
-            </button>
+          <div>
+            This is a Tooltip
           </div>
         </div>
-        <div>
-          By hovering here you can see very long and useful info that totally breaks into two lines
-        </div>
       </div>
-      <h2>
-        Tooltip with component content
-      </h2>
+    </div>
+    <div
+      className="emotion-7"
+    >
       <div
-        className="emotion-21"
-        interactive={false}
-        interactiveDebounce={100}
-        placement="right"
+        style={
+          Object {
+            "margin": 5,
+          }
+        }
       >
         <div
-          className="emotion-5"
-        >
-          <button
-            className="emotion-6"
-            data-testid="button"
-            disabled={false}
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="emotion-7"
-            >
-              <span>
-                Right
-              </span>
-            </span>
-          </button>
-        </div>
-      </div>
-      <div>
-        <div
-          className="emotion-25"
+          style={
+            Object {
+              "padding": "16px",
+            }
+          }
         >
           <div
-            className="emotion-26"
+            arrow={true}
+            className="emotion-8"
+            delay={
+              Array [
+                500,
+                500,
+              ]
+            }
+            interactive={false}
+            placement="right"
           >
             <div
-              className="emotion-27"
-            >
-              By hover here you can see:
-            </div>
-            <div
-              aria-readonly="true"
-              className="emotion-28"
-              data-testid="chip"
+              className="emotion-4"
             >
-              <div>
-                <a
-                  href="/"
+              <button
+                className="emotion-10"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="emotion-6"
                 >
-                  Go to homepage
-                </a>
-              </div>
+                  <span>
+                    Hover here
+                  </span>
+                </span>
+              </button>
             </div>
           </div>
+          <div>
+            This is a Tooltip
+          </div>
         </div>
       </div>
     </div>
@@ -424,7 +981,7 @@ exports[`Storyshots Design System/Tooltip Generic Tooltip 1`] = `
 </div>
 `;
 
-exports[`Storyshots Design System/Tooltip Tooltip sizes 1`] = `
+exports[`Storyshots Design System/Tooltip Tooltip Placement 1`] = `
 .emotion-0 {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -455,69 +1012,85 @@ exports[`Storyshots Design System/Tooltip Tooltip sizes 1`] = `
 }
 
 .emotion-3 {
-  background: transparent;
+  background-color: #1B214F;
+  border: 0.0625rem solid rgba(84,94,255,0);
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
 }
 
 .emotion-3 .tippy-content {
-  color: white;
-  background-color: #0f0f17;
+  background-color: #1B214F;
   max-width: 16rem;
   padding: 0.5rem;
-  font-size: 1rem;
+  border-radius: 0.25rem;
+  color: #ffffff;
+  font-family: Roboto;
   font-weight: 400;
-  line-height: 110%;
-  border-radius: 0.5rem;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
   text-align: start;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
-.emotion-3 .tippy-arrow {
-  color: #0f0f17;
+.emotion-3 .tippy-arrow::before {
+  color: #1B214F;
 }
 
 .emotion-4 {
-  background: transparent;
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
-.emotion-4 .tippy-content {
-  color: white;
-  background-color: #0f0f17;
-  max-width: 16rem;
-  padding: 0.5rem;
+.emotion-5 {
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1.25rem;
   font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 110%;
-  border-radius: 0.5rem;
-  text-align: start;
-  white-space: pre-wrap;
-  word-break: break-word;
+  letter-spacing: 0.015625rem;
+  color: #ffffff;
+  background-color: #175bf5;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: none;
+  cursor: pointer;
+  -webkit-transition: background-color,border 150ms linear;
+  transition: background-color,border 150ms linear;
 }
 
-.emotion-4 .tippy-arrow {
-  color: #0f0f17;
+.emotion-5:focus-visible:not(:disabled) {
+  background-color: #1552DD;
 }
 
-.emotion-5 {
-  background: transparent;
+.emotion-5:disabled {
+  opacity: 50%;
+  cursor: not-allowed;
 }
 
-.emotion-5 .tippy-content {
-  color: white;
-  background-color: #0f0f17;
-  max-width: 16rem;
-  padding: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 110%;
-  border-radius: 0.5rem;
-  text-align: start;
-  white-space: pre-wrap;
-  word-break: break-word;
+.emotion-5:hover:not(:disabled) {
+  background-color: #1552DD;
+}
+
+.emotion-5:active:not(:disabled) {
+  background-color: #1249C4;
 }
 
-.emotion-5 .tippy-arrow {
-  color: #0f0f17;
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  gap: 0.5rem;
 }
 
 <div
@@ -537,59 +1110,52 @@ exports[`Storyshots Design System/Tooltip Tooltip sizes 1`] = `
         }
       >
         <div
-          className="emotion-3"
-          interactive={false}
-          interactiveDebounce={100}
-          placement="right"
-        >
-          <button>
-            Large
-          </button>
-        </div>
-        <div>
-          By hover here you can see useful info
-        </div>
-      </div>
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-4"
-          interactive={false}
-          interactiveDebounce={100}
-          placement="right"
-        >
-          <button>
-            Medium
-          </button>
-        </div>
-        <div>
-          By hover here you can see useful info
-        </div>
-      </div>
-      <div
-        style={
-          Object {
-            "margin": 5,
+          style={
+            Object {
+              "alignItems": "center",
+              "display": "flex",
+              "height": "100px",
+              "justifyContent": "center",
+              "padding": "16px",
+              "width": "300px",
+            }
           }
-        }
-      >
-        <div
-          className="emotion-5"
-          interactive={false}
-          interactiveDebounce={100}
-          placement="right"
         >
-          <button>
-            Small
-          </button>
-        </div>
-        <div>
-          By hover here you can see useful info
+          <div
+            arrow={true}
+            className="emotion-3"
+            delay={
+              Array [
+                500,
+                500,
+              ]
+            }
+            interactive={false}
+            placement="right"
+          >
+            <div
+              className="emotion-4"
+            >
+              <button
+                className="emotion-5"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="emotion-6"
+                >
+                  <span>
+                    Hover here
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div>
+            This is a Tooltip
+          </div>
         </div>
       </div>
     </div>