diff --git a/packages/web-react/src/components/Tooltip/README.md b/packages/web-react/src/components/Tooltip/README.md
index 45ce515097..9418fe7bfe 100644
--- a/packages/web-react/src/components/Tooltip/README.md
+++ b/packages/web-react/src/components/Tooltip/README.md
@@ -5,7 +5,7 @@
 ### Basic
 
 ```javascript
-import { Tooltip, TooltipTrigger, TooltipPopover, Button } from '@lmc-eu/spirit-web-react/components';
+import { Tooltip, TooltipTrigger, TooltipPopover } from '@lmc-eu/spirit-web-react/components';
 
 const [open, setOpen] = React.useState(false);
 
diff --git a/packages/web-react/src/components/Tooltip/Tooltip.tsx b/packages/web-react/src/components/Tooltip/Tooltip.tsx
index 2101f58550..5bc550c8c1 100644
--- a/packages/web-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/web-react/src/components/Tooltip/Tooltip.tsx
@@ -29,7 +29,7 @@ const Tooltip = (props: SpiritTooltipProps) => {
   const arrowRef = useRef<HTMLSpanElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
 
-  // Get `maxWidth` and `--tooltip-offset` from CSS variables
+  // Get `--tooltip-max-width` and `--tooltip-offset` from CSS variables
   let tooltipMaxWidth;
   let tooltipOffset;
   let tooltipCornerOffset;
diff --git a/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx b/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx
index dda8502ac4..845ec84331 100644
--- a/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx
+++ b/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx
@@ -1,21 +1,20 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-// import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { Button } from '../../Button';
 import { Tooltip, TooltipTrigger, TooltipPopover } from '..';
 
 describe('Tooltip', () => {
-  stylePropsTest((props) => <Tooltip {...props} data-testid="Tooltip-test" />, 'Tooltip-test');
-
-  restPropsTest((props) => <Tooltip {...props} />, 'div');
-
   const id = 'TooltipTest';
   const triggerText = 'TooltipTrigger';
   const popoverText = 'TooltipPopover';
 
+  stylePropsTest((props) => <Tooltip id={id} {...props} data-testid="Tooltip-test" />, 'Tooltip-test');
+
+  restPropsTest((props) => <Tooltip id={id} {...props} />, 'div');
+
   it('should render tooltip', () => {
     const onToggle = () => null;
     const open = true;
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx
index 9e1c7cf7c4..98727d286d 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx
@@ -6,12 +6,10 @@ const TooltipDefault = () => {
   const [open, setOpen] = useState(true);
 
   return (
-    <div className="docs-Stack docs-Stack-stretch">
-      <Tooltip id="TooltipDefault" isOpen={open} onToggle={setOpen}>
-        <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
-        <TooltipPopover>Hello there!</TooltipPopover>
-      </Tooltip>
-    </div>
+    <Tooltip id="TooltipDefault" isOpen={open} onToggle={setOpen}>
+      <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
+      <TooltipPopover>Hello there!</TooltipPopover>
+    </Tooltip>
   );
 };
 
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx
index 7969890f7f..be716ef425 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx
@@ -6,19 +6,17 @@ const TooltipDismissible = () => {
   const [open, setOpen] = useState(true);
 
   return (
-    <div className="docs-Stack docs-Stack-stretch">
-      <Tooltip
-        id="TooltipDismissible"
-        isOpen={open}
-        onToggle={setOpen}
-        placement="right"
-        isDismissible
-        trigger={['click']}
-      >
-        <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
-        <TooltipPopover>Close me</TooltipPopover>
-      </Tooltip>
-    </div>
+    <Tooltip
+      id="TooltipDismissible"
+      isOpen={open}
+      onToggle={setOpen}
+      placement="right"
+      isDismissible
+      trigger={['click']}
+    >
+      <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
+      <TooltipPopover>Close me</TooltipPopover>
+    </Tooltip>
   );
 };
 
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx
index 72cc5c9680..8426b4f6a6 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx
@@ -11,7 +11,7 @@ const TooltipDismissibleViaJS = () => {
   }, [open]);
 
   return (
-    <div className="docs-Stack docs-Stack-stretch">
+    <>
       <p>Saves data to local storage.</p>
       <Tooltip
         id="TooltipDismissibleViaJS"
@@ -24,7 +24,7 @@ const TooltipDismissibleViaJS = () => {
         <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
         <TooltipPopover>Close me</TooltipPopover>
       </Tooltip>
-    </div>
+    </>
   );
 };
 
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipHover.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipHover.tsx
index c26f8c1929..ea00d7c37c 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipHover.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipHover.tsx
@@ -1,30 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button } from '../../Button';
 import { Tooltip, TooltipPopover, TooltipTrigger } from '..';
 
 const TooltipHover = () => {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
 
   return (
-    <div>
-      <Tooltip
-        id="tooltip-on-hover-floating-ui"
-        isOpen={open}
-        onToggle={setOpen}
-        placement="right"
-        flipFallbackPlacements={['left', 'top-start', 'bottom-start']}
-        trigger={['hover']}
-        isFocusableOnHover
-      >
-        <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
-        <TooltipPopover>
-          Hello there! <br />
-          <a href="#" className="link-inverted">
-            Click me
-          </a>
-        </TooltipPopover>
-      </Tooltip>
-    </div>
+    <Tooltip
+      id="tooltip-on-hover-floating-ui"
+      isOpen={open}
+      onToggle={setOpen}
+      placement="right"
+      flipFallbackPlacements={['left', 'top-start', 'bottom-start']}
+      trigger={['hover']}
+      isFocusableOnHover
+    >
+      <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
+      <TooltipPopover>
+        Hello there! <br />
+        <a href="#" className="link-inverted">
+          Click me
+        </a>
+      </TooltipPopover>
+    </Tooltip>
   );
 };
 
diff --git a/packages/web-react/src/components/Tooltip/demo/UncontrolledTooltip.tsx b/packages/web-react/src/components/Tooltip/demo/UncontrolledTooltip.tsx
index e54370a75b..bdeae5d160 100644
--- a/packages/web-react/src/components/Tooltip/demo/UncontrolledTooltip.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/UncontrolledTooltip.tsx
@@ -3,20 +3,18 @@ import { Button } from '../../Button';
 import { UncontrolledTooltip, TooltipPopover, TooltipTrigger } from '..';
 
 const UncontrolledTooltipDemo = () => (
-  <div className="docs-Stack docs-Stack-stretch">
-    <UncontrolledTooltip
-      id="UncontrolledTooltip"
-      placement="left"
-      isFocusableOnHover
-      isDismissible
-      UNSAFE_className="test"
-      UNSAFE_style={{ color: 'red' }}
-      data-testid="test"
-    >
-      <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
-      <TooltipPopover>Close me</TooltipPopover>
-    </UncontrolledTooltip>
-  </div>
+  <UncontrolledTooltip
+    id="UncontrolledTooltip"
+    placement="left"
+    isFocusableOnHover
+    isDismissible
+    UNSAFE_className="test"
+    UNSAFE_style={{ color: 'red' }}
+    data-testid="test"
+  >
+    <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
+    <TooltipPopover>Close me</TooltipPopover>
+  </UncontrolledTooltip>
 );
 
 export default UncontrolledTooltipDemo;
diff --git a/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx b/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx
index b8cf4ab637..331b59d932 100644
--- a/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx
+++ b/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx
@@ -2,26 +2,12 @@ import React, { useEffect, useRef } from 'react';
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Placements } from '../../../constants';
 import { SpiritTooltipProps } from '../../../types';
 import { Button } from '../..';
 import ReadMe from '../README.md';
 import { UncontrolledTooltip, TooltipPopover, TooltipTrigger } from '..';
 
-const Placements = [
-  'top',
-  'bottom',
-  'left',
-  'right',
-  'left-end',
-  'left-start',
-  'right-end',
-  'right-start',
-  'top-end',
-  'top-start',
-  'bottom-end',
-  'bottom-start',
-];
-
 const meta: Meta<typeof UncontrolledTooltip> = {
   title: 'Components/Tooltip',
   component: UncontrolledTooltip,