diff --git a/packages/web/src/scss/components/Tooltip/_theme.scss b/packages/web/src/scss/components/Tooltip/_theme.scss
index 59ff9d1bed..d43b28e5db 100644
--- a/packages/web/src/scss/components/Tooltip/_theme.scss
+++ b/packages/web/src/scss/components/Tooltip/_theme.scss
@@ -1,23 +1,24 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../settings/dictionaries';
+@use '../../settings/globals';
 @use '../../settings/transitions';
 
 $max-width: 288px;
-$typography: tokens.$body-medium-text-regular;
-$padding: tokens.$space-500 tokens.$space-600;
-$gap: tokens.$space-500;
-$border-radius: tokens.$radius-100;
-$color: tokens.$text-primary-inverted-default;
-$background-color: tokens.$background-inverted;
-$box-shadow: tokens.$shadow-400;
+$typography: global-tokens.$body-medium-regular;
+$padding: global-tokens.$space-600 global-tokens.$space-700;
+$gap: global-tokens.$space-600;
+$border-radius: global-tokens.$radius-300;
+$color: var(--#{globals.$prefix}color-neutral-content-subtle);
+$background-color: var(--#{globals.$prefix}color-neutral-background-basic);
+$box-shadow: global-tokens.$shadow-400;
 $transition-duration: transitions.$duration-200;
 $transition-scale-ratio: transitions.$scale-ratio-small-objects;
 
-$arrow-shape: url('data:image/svg+xml,<svg width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path fill="#{$background-color}" d="M4.915,2.054c0.801,-1.04 2.369,-1.04 3.17,-0l9.793,12.721c1.012,1.315 0.074,3.22 -1.585,3.22l-19.586,-0c-1.66,-0 -2.597,-1.905 -1.585,-3.22l9.793,-12.721Z" /></svg>');
+$arrow-shape: var(--#{globals.$prefix}tooltip-arrow-background-image-url);
 $arrow-width: 13px;
 $arrow-height: 8px;
-$arrow-corner-offset: tokens.$space-500;
+$arrow-corner-offset: global-tokens.$space-600;
 
-$close-button-size: tokens.$space-700;
+$close-button-size: global-tokens.$space-900;
 
 $placement-dictionary: dictionaries.$placement;
diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html
index d80aa805db..dc45c53b0d 100644
--- a/packages/web/src/scss/components/Tooltip/index.html
+++ b/packages/web/src/scss/components/Tooltip/index.html
@@ -410,8 +410,8 @@ <h2 class="docs-Heading">Placements</h2>
           </div>
           <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 2">
 
-            <div class="Tooltip" style="margin: 5rem auto" data-spirit-element="tooltip">
-              <div class="docs-Box px-900 py-900" >
+            <div class="Tooltip mx-auto my-1600" data-spirit-element="tooltip">
+              <div class="docs-Box px-1100 py-1100" >
                 Click<br />
                 the dots!
               </div>
@@ -453,13 +453,13 @@ <h2 class="docs-Heading">Advanced Floating Functionality</h2>
         }
       </style>
 
-      <p class="mb-600">
+      <p class="mb-700">
         Try scrolling the frame or resizing the window to see how the Tooltip behaves. The Floating UI
         library is trying to keep the Tooltip in the viewport and it is also flipping, shifting and
         resizing the Tooltip when it is not possible to keep it in the viewport.
       </p>
 
-      <div class="Grid Grid--cols-1 Grid--tablet--cols-4 mb-600">
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-4 mb-700">
         <div>
           <label for="my-advanced-flip" class="Checkbox">
             <input type="checkbox" id="my-advanced-flip" class="Checkbox__input" name="advanced-flip" checked />
@@ -493,7 +493,7 @@ <h2 class="docs-Heading">Advanced Floating Functionality</h2>
           </label>
         </div>
       </div>
-      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 mb-600">
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 mb-700">
         <div class="Select">
           <label for="my-advanced-select" class="Select__label">Suggested placement</label>
           <div class="Select__inputContainer">
@@ -538,7 +538,7 @@ <h2 class="docs-Heading">Advanced Floating Functionality</h2>
         </div>
       </div>
 
-      <div class="example-viewport bg-cover" id="my-advanced-viewport">
+      <div class="example-viewport bg-secondary" id="my-advanced-viewport">
         <div class="example-content" id="my-advanced-content">
 
           <div class="Tooltip d-inline-block" data-spirit-element="tooltip">
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index 2e2d1e6fb6..17e6ac07d5 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -32,7 +32,7 @@
 @forward 'TextField';
 
 // @forward 'Toast';
-// @forward 'Tooltip';
+@forward 'Tooltip';
 @forward 'UNSTABLE_ActionLayout';
 @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';
diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts
index c71b407706..4495ad3900 100644
--- a/tests/e2e/demo-components-compare.spec.ts
+++ b/tests/e2e/demo-components-compare.spec.ts
@@ -20,7 +20,6 @@ const IGNORED_TESTS: string[] = [
   'Stack',
   'Text',
   'Toast',
-  'Tooltip',
   'UNSTABLE_Slider',
   'UNSTABLE_Toggle',
   'UNSTABLE_Truncate',
@@ -89,7 +88,7 @@ const testConfigs: TestConfig[] = [
 ];
 
 // Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet.
-if (!isTestingEnvironment()) {
+if (isTestingEnvironment()) {
   testConfigs.push({
     componentsDir: '/components',
     packageDir: 'packages/web-twig',
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png
index 4b1383e586..9a76fe4f91 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png differ