diff --git a/packages/web-react/src/components/Tooltip/Tooltip.tsx b/packages/web-react/src/components/Tooltip/Tooltip.tsx
index d71ae654e9..3f9ef40e35 100644
--- a/packages/web-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/web-react/src/components/Tooltip/Tooltip.tsx
@@ -1,11 +1,11 @@
-import React, { useMemo, forwardRef, LegacyRef } from 'react';
 import classNames from 'classnames';
+import React, { LegacyRef, forwardRef, useMemo } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritTooltipProps } from '../../types';
 import TooltipCloseButton from './TooltipCloseButton';
 import { useTooltipStyleProps } from './useTooltipStyleProps';
 
-const Tooltip = forwardRef((props: SpiritTooltipProps, ref) => {
+export const Tooltip = forwardRef((props: SpiritTooltipProps, ref) => {
   const { children, isDismissible, closeLabel = 'Close', open, onClose, ...restProps } = props;
 
   const { classProps, props: modifiedProps } = useTooltipStyleProps({
diff --git a/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx b/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx
index 60f739ed59..66e4235e51 100644
--- a/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx
+++ b/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx
@@ -6,7 +6,7 @@ import { Icon } from '../Icon';
 import { VisuallyHidden } from '../VisuallyHidden';
 import { useTooltipStyleProps } from './useTooltipStyleProps';
 
-const TooltipCloseButton = ({ label = 'Close', onClick, ...restProps }: TooltipCloseButtonProps) => {
+export const TooltipCloseButton = ({ label = 'Close', onClick, ...restProps }: TooltipCloseButtonProps) => {
   const { classProps, props: modifiedProps } = useTooltipStyleProps({ ...restProps });
   const { styleProps } = useStyleProps({ ...modifiedProps });
 
diff --git a/packages/web-react/src/components/Tooltip/TooltipWrapper.tsx b/packages/web-react/src/components/Tooltip/TooltipWrapper.tsx
index fcb5eaa91a..f7c4d31e96 100644
--- a/packages/web-react/src/components/Tooltip/TooltipWrapper.tsx
+++ b/packages/web-react/src/components/Tooltip/TooltipWrapper.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { TooltipWrapperProps } from '../../types';
 import { useTooltipStyleProps } from './useTooltipStyleProps';
 
-const TooltipWrapper = ({ children, ...restProps }: TooltipWrapperProps) => {
+export const TooltipWrapper = ({ children, ...restProps }: TooltipWrapperProps) => {
   const { classProps, props: modifiedProps } = useTooltipStyleProps({ ...restProps });
   const { styleProps } = useStyleProps({ ...modifiedProps });
 
diff --git a/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx
index a4072a16cf..4a54c7e0d3 100644
--- a/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx
+++ b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx
@@ -3,7 +3,7 @@ import { UncontrolledTooltipProps } from '../../types';
 import Tooltip from './Tooltip';
 import { useTooltip } from './useTooltip';
 
-const UncontrolledTooltip = (props: UncontrolledTooltipProps) => {
+export const UncontrolledTooltip = (props: UncontrolledTooltipProps) => {
   const { children, isDismissible, ...restProps } = props;
 
   const { open, onClose } = useTooltip({ isDismissible });
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipOnHover.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipOnHover.tsx
index 6bfe2ee0a9..11f2dd24c9 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipOnHover.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipOnHover.tsx
@@ -1,38 +1,35 @@
 import React from 'react';
 import { ButtonLink } from '../../Button';
-import TooltipWrapper from '../TooltipWrapper';
 import Tooltip from '../Tooltip';
+import TooltipWrapper from '../TooltipWrapper';
 
 const TooltipOnHover = () => (
-  <>
-    <TooltipWrapper>
+  <div>
+    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
       <ButtonLink href="#" aria-describedby="my-tooltip-hover-top" UNSAFE_className="TooltipTarget">
         Tooltip on top
       </ButtonLink>
       <Tooltip id="my-tooltip-hover-top" placement="top">
         Hello there!
       </Tooltip>
-    </TooltipWrapper>
-
-    <TooltipWrapper>
+    </TooltipWrapper>{' '}
+    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
       <ButtonLink href="#" aria-describedby="my-tooltip-hover-right" UNSAFE_className="TooltipTarget">
         Tooltip on right
       </ButtonLink>
       <Tooltip id="my-tooltip-hover-right" placement="right">
         Hello there!
       </Tooltip>
-    </TooltipWrapper>
-
-    <TooltipWrapper>
+    </TooltipWrapper>{' '}
+    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
       <ButtonLink href="#" aria-describedby="my-tooltip-hover-bottom" UNSAFE_className="TooltipTarget">
         Tooltip on bottom
       </ButtonLink>
       <Tooltip id="my-tooltip-hover-bottom" placement="bottom">
         Hello there!
       </Tooltip>
-    </TooltipWrapper>
-
-    <TooltipWrapper>
+    </TooltipWrapper>{' '}
+    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
       <ButtonLink href="#" aria-describedby="my-tooltip-hover-left" UNSAFE_className="TooltipTarget">
         Tooltip on left
       </ButtonLink>
@@ -40,7 +37,7 @@ const TooltipOnHover = () => (
         Hello there!
       </Tooltip>
     </TooltipWrapper>
-  </>
+  </div>
 );
 
 export default TooltipOnHover;
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
index a2100d1eca..7d68a393c6 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
@@ -14,8 +14,12 @@ const TooltipPlacements = () => {
   };
 
   return (
-    <form autoComplete="off" className="mx-auto">
-      <Grid cols={3} UNSAFE_style={{ alignItems: 'center', justifyItems: 'center' }}>
+    <form autoComplete="off">
+      <Grid
+        cols={3}
+        UNSAFE_className="mx-auto"
+        UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '30rem' }}
+      >
         <div style={{ gridRow: 1, gridColumn: 2 }}>
           <Radio
             name="placement"
@@ -74,7 +78,7 @@ const TooltipPlacements = () => {
             value="bottom-right"
           />
         </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gridRow: 2, gridColumn: 1 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gridRow: 2, gridColumn: 1, justifySelf: 'start' }}>
           <Radio
             name="placement"
             isChecked={placement === 'left-top'}
@@ -103,7 +107,7 @@ const TooltipPlacements = () => {
             value="left-bottom"
           />
         </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gridRow: 2, gridColumn: 3 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gridRow: 2, gridColumn: 3, justifySelf: 'end' }}>
           <Radio
             name="placement"
             isChecked={placement === 'right-top'}
@@ -133,9 +137,12 @@ const TooltipPlacements = () => {
           />
         </div>
         <div style={{ gridRow: 2, gridColumn: 2 }}>
-          <TooltipWrapper UNSAFE_style={{ margin: '6rem auto' }}>
-            <DocsBox>Click the dots!</DocsBox>
-            <Tooltip placement={placement as PlacementDictionaryType}>Hello!</Tooltip>
+          <TooltipWrapper UNSAFE_style={{ margin: '5rem auto' }}>
+            <DocsBox UNSAFE_className="px-900 py-900">
+              Click
+              <br /> the dots!
+            </DocsBox>
+            <Tooltip placement={placement as PlacementDictionaryType}>{placement}</Tooltip>
           </TooltipWrapper>
         </div>
       </Grid>
diff --git a/packages/web-react/src/components/Tooltip/demo/index.tsx b/packages/web-react/src/components/Tooltip/demo/index.tsx
index 02d97bf247..d783c25b65 100644
--- a/packages/web-react/src/components/Tooltip/demo/index.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/index.tsx
@@ -7,24 +7,24 @@ import ReactDOM from 'react-dom/client';
 import icons from '@lmc-eu/spirit-icons/dist/icons';
 import DocsSection from '../../../../docs/DocsSections';
 import { IconsProvider } from '../../../context';
-import TooltipPlacements from './TooltipPlacements';
-import TooltipDefault from './TooltipDefault';
-import TooltipOnHover from './TooltipOnHover';
 import TooltipClickable from './TooltipClickable';
+import TooltipDefault from './TooltipDefault';
 import TooltipDismissible from './TooltipDismissible';
-import TooltipFloatingUI from './TooltipFloatingUi';
 import TooltipDismissibleViaJS from './TooltipDismissibleViaJS';
+import TooltipFloatingUI from './TooltipFloatingUi';
+import TooltipOnHover from './TooltipOnHover';
+import TooltipPlacements from './TooltipPlacements';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
-      <DocsSection title="Placements">
+      <DocsSection title="Placements" stackAlignment="stretch">
         <TooltipPlacements />
       </DocsSection>
       <DocsSection title="Static Tooltip (No Interaction)">
         <TooltipDefault />
       </DocsSection>
-      <DocsSection title="Tooltip on Hover (Pure CSS)">
+      <DocsSection title="Tooltip on Hover (Pure CSS)" stackAlignment="stretch">
         <TooltipOnHover />
       </DocsSection>
       <DocsSection title="Tooltip on Click (JavaScript)">
diff --git a/packages/web-react/src/components/Tooltip/index.ts b/packages/web-react/src/components/Tooltip/index.ts
index a4cd67bb78..211af3a55e 100644
--- a/packages/web-react/src/components/Tooltip/index.ts
+++ b/packages/web-react/src/components/Tooltip/index.ts
@@ -1,9 +1,10 @@
 export * from './Tooltip';
-export * from './TooltipWrapper';
+export { default as Tooltip } from './Tooltip';
 export * from './TooltipCloseButton';
+export { default as TooltipCloseButton } from './TooltipCloseButton';
+export * from './TooltipWrapper';
+export { default as TooltipWrapper } from './TooltipWrapper';
 export * from './UncontrolledTooltip';
+export { default as UncontrolledTooltip } from './UncontrolledTooltip';
 export * from './useTooltip';
 export * from './useTooltipStyleProps';
-export { default as Tooltip } from './Tooltip';
-export { default as TooltipWrapper } from './TooltipWrapper';
-export { default as UncontrolledTooltip } from './UncontrolledTooltip';
diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
index 73b02a34b3..a7232959d6 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <DocsSection title="Placements">
+    <DocsSection title="Placements" stackAlignment="stretch">
         {% include '@components/Tooltip/stories/TooltipPlacements.twig' %}
     </DocsSection>
 
@@ -10,7 +10,7 @@
         {% include '@components/Tooltip/stories/TooltipStatic.twig' %}
     </DocsSection>
 
-    <DocsSection title="Tooltip on Hover (Pure CSS)">
+    <DocsSection title="Tooltip on Hover (Pure CSS)" stackAlignment="stretch">
         {% include '@components/Tooltip/stories/TooltipOnHover.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
index 15e948d3af..188feaabb9 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
@@ -1,51 +1,37 @@
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-top"
-        UNSAFE_className="TooltipTarget"
-    >
-        Tooltip on top
-    </ButtonLink>
-    <Tooltip id="my-tooltip-hover-top" placement="top">
-        Hello there!
-    </Tooltip>
-</TooltipWrapper>
+<div>
+    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+        <ButtonLink href="#" aria-describedby="my-tooltip-hover-top" UNSAFE_className="TooltipTarget">
+            Tooltip on top
+        </ButtonLink>
+        <Tooltip id="my-tooltip-hover-top" placement="top">
+            Hello there!
+        </Tooltip>
+    </TooltipWrapper>
 
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-right"
-        UNSAFE_className="TooltipTarget"
-    >
-        Tooltip on right
-    </ButtonLink>
-    <Tooltip id="my-tooltip-hover-right" placement="right">
-        Hello there!
-    </Tooltip>
-</TooltipWrapper>
+    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+        <ButtonLink href="#" aria-describedby="my-tooltip-hover-right" UNSAFE_className="TooltipTarget">
+            Tooltip on right
+        </ButtonLink>
+        <Tooltip id="my-tooltip-hover-right" placement="right">
+            Hello there!
+        </Tooltip>
+    </TooltipWrapper>
 
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-bottom"
-        UNSAFE_className="TooltipTarget"
-    >
-        Tooltip on bottom
-    </ButtonLink>
-    <Tooltip id="my-tooltip-hover-bottom" placement="bottom">
-        Hello there!
-    </Tooltip>
-</TooltipWrapper>
+    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+        <ButtonLink href="#" aria-describedby="my-tooltip-hover-bottom" UNSAFE_className="TooltipTarget">
+            Tooltip on bottom
+        </ButtonLink>
+        <Tooltip id="my-tooltip-hover-bottom" placement="bottom">
+            Hello there!
+        </Tooltip>
+    </TooltipWrapper>
 
-<TooltipWrapper>
-    <ButtonLink
-        href="#"
-        aria-describedby="my-tooltip-hover-left"
-        UNSAFE_className="TooltipTarget"
-    >
-        Tooltip on left
-    </ButtonLink>
-    <Tooltip id="my-tooltip-hover-left" placement="left">
-        Hello there!
-    </Tooltip>
-</TooltipWrapper>
+    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+        <ButtonLink href="#" aria-describedby="my-tooltip-hover-left" UNSAFE_className="TooltipTarget">
+            Tooltip on left
+        </ButtonLink>
+        <Tooltip id="my-tooltip-hover-left" placement="left">
+            Hello there!
+        </Tooltip>
+    </TooltipWrapper>
+</div>
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
index e4d1850c89..fd79af4ef2 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
@@ -1,44 +1,45 @@
-<form autocomplete="off" class="mx-auto">
-    <Grid cols="3" UNSAFE_style="align-items: center; justify-items: center">
+<form autocomplete="off">
+    <Grid cols="3" UNSAFE_className="mx-auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 30rem;">
         <div style="grid-row: 1; grid-column: 2">
 
-            <Radio name="placement" isLabelHidden value="topLeft" id="placement_top_left" label="top-left" />
-            <Radio name="placement" isLabelHidden value="top" id="placement_top" label="top" />
-            <Radio name="placement" isLabelHidden value="topRight" id="placement_top_right" label="top-right" />
+            <Radio name="placement" isLabelHidden value="topLeft" id="placement_top_left" label="top-left"/>
+            <Radio name="placement" isLabelHidden value="top" id="placement_top" label="top"/>
+            <Radio name="placement" isLabelHidden value="topRight" id="placement_top_right" label="top-right"/>
 
         </div>
         <div style="grid-row: 3; grid-column: 2">
 
-            <Radio name="placement" isLabelHidden value="bottomLeft" id="placement_bottom_left" label="bottom-left" />
-            <Radio name="placement" isLabelHidden value="bottom" id="placement_bottom" label="bottom" isChecked />
-            <Radio name="placement" isLabelHidden value="bottomRight" id="placement_bottom_right" label="bottom-right" />
+            <Radio name="placement" isLabelHidden value="bottomLeft" id="placement_bottom_left" label="bottom-left"/>
+            <Radio name="placement" isLabelHidden value="bottom" id="placement_bottom" label="bottom" isChecked/>
+            <Radio name="placement" isLabelHidden value="bottomRight" id="placement_bottom_right" label="bottom-right"/>
 
         </div>
-        <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 1">
+        <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 1; justify-self: start;">
 
-            <Radio name="placement" isLabelHidden value="leftTop" id="placement_left_top" label="left-top" />
-            <Radio name="placement" isLabelHidden value="left" id="placement_left" label="left" />
-            <Radio name="placement" isLabelHidden value="leftBottom" id="placement_left_bottom" label="left-bottom" />
+            <Radio name="placement" isLabelHidden value="leftTop" id="placement_left_top" label="left-top"/>
+            <Radio name="placement" isLabelHidden value="left" id="placement_left" label="left"/>
+            <Radio name="placement" isLabelHidden value="leftBottom" id="placement_left_bottom" label="left-bottom"/>
 
         </div>
-        <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 3">
+        <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 3; justify-self: end;">
 
-            <Radio name="placement" isLabelHidden value="rightTop" id="placement_right_top" label="right-top" />
-            <Radio name="placement" isLabelHidden value="right" id="placement_right" label="right" />
-            <Radio name="placement" isLabelHidden value="rightBottom" id="placement_right_bottom" label="right-bottom" />
+            <Radio name="placement" isLabelHidden value="rightTop" id="placement_right_top" label="right-top"/>
+            <Radio name="placement" isLabelHidden value="right" id="placement_right" label="right"/>
+            <Radio name="placement" isLabelHidden value="rightBottom" id="placement_right_bottom" label="right-bottom"/>
 
         </div>
         <div style="grid-row: 2; grid-column: 2">
 
-            <TooltipWrapper UNSAFE_style="margin: 6rem auto">
-                <DocsBox>Click the dots!</DocsBox>
-                <Tooltip id="tooltip_placements_example">Hello!</Tooltip>
+            <TooltipWrapper UNSAFE_style="margin: 5rem auto">
+                <DocsBox UNSAFE_className="px-900 py-900">Click<br /> the dots!</DocsBox>
+                <Tooltip id="tooltip_placements_example">
+                    <span id="tooltip_placements_example_text">bottom</span>
+                </Tooltip>
             </TooltipWrapper>
 
         </div>
     </Grid>
 </form>
-
 <script>
     const radios = document.querySelectorAll('input[type="radio"]');
 
@@ -46,8 +47,10 @@
         radio.addEventListener('change', () => {
             const placement = radio.value;
             const tooltip = document.getElementById('tooltip_placements_example');
+            const tooltipText = document.getElementById('tooltip_placements_example_text');
 
             tooltip.classList.replace(tooltip.classList[1], `Tooltip--${placement}`);
+            tooltipText.textContent = placement.split(/(?=[A-Z])/).join('-').toLowerCase();
         });
     });
 </script>
diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html
index fb9e41ed89..2d86b72d67 100644
--- a/packages/web/src/scss/components/Tooltip/index.html
+++ b/packages/web/src/scss/components/Tooltip/index.html
@@ -4,10 +4,10 @@
 
     <h2 class="docs-Heading">Placements</h2>
 
-    <div class="docs-Stack docs-Stack--start">
+    <div class="docs-Stack docs-Stack--stretch">
 
-      <form autocomplete="off" class="mx-auto">
-        <div class="Grid Grid--cols-3" style="align-items: center; justify-items: center">
+      <form autocomplete="off">
+        <div class="Grid Grid--cols-3 mx-auto" style="align-items: center; justify-items: center; max-width: 30rem;">
           <div style="grid-row: 1; grid-column: 2">
 
             <label for="placement_top_left" class="Radio">
@@ -52,7 +52,7 @@ <h2 class="docs-Heading">Placements</h2>
             </label>
 
           </div>
-          <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 1">
+          <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 1; justify-self: start;">
 
             <label for="placement_left_top" class="Radio">
               <input type="radio" name="placement" value="leftTop" id="placement_left_top" class="Radio__input" />
@@ -74,7 +74,7 @@ <h2 class="docs-Heading">Placements</h2>
             </label>
 
           </div>
-          <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 3">
+          <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 3; justify-self: end;">
 
             <label for="placement_right_top" class="Radio">
               <input type="radio" name="placement" value="rightTop" id="placement_right_top" class="Radio__input" />
@@ -98,10 +98,13 @@ <h2 class="docs-Heading">Placements</h2>
           </div>
           <div style="grid-row: 2; grid-column: 2">
 
-            <div class="TooltipWrapper" style="margin: 6rem auto">
-              <div class="docs-Box">Click the dots!</div>
+            <div class="TooltipWrapper" style="margin: 5rem auto">
+              <div class="docs-Box px-900 py-900">
+                Click<br />
+                the dots!
+              </div>
               <div class="Tooltip Tooltip--bottom" id="tooltip_placements_example">
-                Hello!
+                <span id="tooltip_placements_example_text">bottom</span>
                 <span class="Tooltip__arrow"></span>
               </div>
             </div>
@@ -117,8 +120,10 @@ <h2 class="docs-Heading">Placements</h2>
           radio.addEventListener('change', () => {
             const placement = radio.value;
             const tooltip = document.getElementById('tooltip_placements_example');
+            const tooltipText = document.getElementById('tooltip_placements_example_text');
 
             tooltip.classList.replace(tooltip.classList[1], `Tooltip--${placement}`);
+            tooltipText.textContent = placement.split(/(?=[A-Z])/).join('-').toLowerCase();
           });
         });
       </script>
@@ -163,42 +168,44 @@ <h2 class="docs-Heading">Static Tooltip (No Interaction)</h2>
 
     <h2 class="docs-Heading">Tooltip on Hover (Pure CSS)</h2>
 
-    <div class="docs-Stack docs-Stack--start">
+    <div class="docs-Stack docs-Stack--stretch">
 
-      <div class="TooltipWrapper d-inline-block">
-        <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-top">
-          Tooltip on top
-        </button>
-        <div id="my-tooltip-hover-top" class="Tooltip Tooltip--top">
-          Hello there!
-          <span class="Tooltip__arrow"></span>
+      <div>
+        <div class="TooltipWrapper d-inline-block mr-600 mb-600">
+          <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-top">
+            Tooltip on top
+          </button>
+          <div id="my-tooltip-hover-top" class="Tooltip Tooltip--top">
+            Hello there!
+            <span class="Tooltip__arrow"></span>
+          </div>
         </div>
-      </div>
-      <div class="TooltipWrapper d-inline-block">
-        <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-right">
-          Tooltip on right
-        </button>
-        <div id="my-tooltip-hover-right" class="Tooltip Tooltip--right">
-          Hello there!
-          <span class="Tooltip__arrow"></span>
+        <div class="TooltipWrapper d-inline-block mr-600 mb-600">
+          <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-right">
+            Tooltip on right
+          </button>
+          <div id="my-tooltip-hover-right" class="Tooltip Tooltip--right">
+            Hello there!
+            <span class="Tooltip__arrow"></span>
+          </div>
         </div>
-      </div>
-      <div class="TooltipWrapper d-inline-block">
-        <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-bottom">
-          Tooltip on bottom
-        </button>
-        <div id="my-tooltip-hover-bottom" class="Tooltip Tooltip--bottom">
-          Hello there!
-          <span class="Tooltip__arrow"></span>
+        <div class="TooltipWrapper d-inline-block mr-600 mb-600">
+          <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-bottom">
+            Tooltip on bottom
+          </button>
+          <div id="my-tooltip-hover-bottom" class="Tooltip Tooltip--bottom">
+            Hello there!
+            <span class="Tooltip__arrow"></span>
+          </div>
         </div>
-      </div>
-      <div class="TooltipWrapper d-inline-block">
-        <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-left">
-          Tooltip on left
-        </button>
-        <div id="my-tooltip-hover-left" class="Tooltip Tooltip--left">
-          Hello there!
-          <span class="Tooltip__arrow"></span>
+        <div class="TooltipWrapper d-inline-block">
+          <button type="button" class="Button Button--primary Button--medium TooltipTarget" aria-describedby="my-tooltip-hover-left">
+            Tooltip on left
+          </button>
+          <div id="my-tooltip-hover-left" class="Tooltip Tooltip--left">
+            Hello there!
+            <span class="Tooltip__arrow"></span>
+          </div>
         </div>
       </div>