diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
index 55b7b310f1..d2420c256c 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
@@ -1,4 +1,6 @@
 import * as React from "react";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import * as Icons from "../../icons";
 import Stack from "../../Stack";
@@ -19,179 +21,115 @@ enum SIZE_OPTIONS {
   MEDIUM = "medium",
 }
 
-const getIcon = source => Icons[source];
-
-export default {
+const meta: Meta<typeof TooltipPrimitive> = {
   title: "TooltipPrimitive",
-};
-
-export const TooltipPrimitiveOnInlineElement = ({ content, removeUnderlinedText }) => {
-  return (
-    <Alert icon={<Icons.Airplane />} title="Lorem ipsum dolor sit amet">
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate eget
-      mollis sed, tempor sed magna.
-      <TooltipPrimitive
-        content={
-          <div>
-            <div>Write your text here.</div>
-            <TextLink>Clickable element.</TextLink>
-          </div>
-        }
-        placement="left"
-      >
-        <TextLink>Cras elementum.</TextLink>
-      </TooltipPrimitive>{" "}
-      Aliquam erat volutpat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-      officia deserunt mollit anim id est laborum. Sed ac dolor sit amet purus malesuada congue. Sed
-      vel lectus.{" "}
-      <TooltipPrimitive content={content} removeUnderlinedText={removeUnderlinedText}>
-        <Text>
-          Aliquam erat volutpat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-          officia deserunt mollit anim id est laborum. Sed ac dolor sit amet purus malesuada congue.
-          Sed vel lectus.
-        </Text>
-      </TooltipPrimitive>
-    </Alert>
-  );
-};
-
-TooltipPrimitiveOnInlineElement.story = {
-  name: "TooltipPrimitive on inline element",
-
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
-
-TooltipPrimitiveOnInlineElement.args = {
-  content: "Write your text here.",
-  removeUnderlinedText: false,
-};
-
-export const TooltipPrimitiveOnBlockElement = ({ content }) => {
-  return (
-    <TooltipPrimitive content={content}>
-      <Heading>Orbit design system</Heading>
-    </TooltipPrimitive>
-  );
-};
-
-TooltipPrimitiveOnBlockElement.story = {
-  name: "TooltipPrimitive on block element",
+  component: TooltipPrimitive,
 
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      exclude: ["onShow", "enabled", "tabIndex", "renderInPortal", "size", "stopPropagation"],
+    },
   },
-};
-
-TooltipPrimitiveOnBlockElement.args = {
-  content:
-    "Write your text here. If it’s longer than three lines though, consider format your content in some more structured way.",
-};
-
-export const TooltipPrimitiveOnDisabledElement = ({ content }) => {
-  return (
-    <TooltipPrimitive content={content}>
-      <Button disabled>Disabled</Button>
-    </TooltipPrimitive>
-  );
-};
-
-TooltipPrimitiveOnDisabledElement.story = {
-  name: "TooltipPrimitive on disabled element",
 
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  args: {
+    onShow: action("onShow"),
   },
 };
 
-TooltipPrimitiveOnDisabledElement.args = {
-  content: "Write your text here.",
-};
+export default meta;
+type Story = StoryObj<typeof TooltipPrimitive>;
 
-export const Placement = ({ size, placement, content }) => {
-  return (
+export const Default: Story = {
+  render: args => (
     <Stack justify="center">
-      <TooltipPrimitive placement={placement} size={size} content={content}>
+      <TooltipPrimitive {...args}>
         <Icons.Airplane />
       </TooltipPrimitive>
     </Stack>
-  );
-};
-
-Placement.story = {
-  name: "Placement",
+  ),
 
   parameters: {
-    info: "If you want to, you can specify one preferred position. If it won't be possible to use it, the defaults will be used.",
-  },
-};
-
-Placement.args = {
-  size: SIZE_OPTIONS.MEDIUM,
-  placement: PLACEMENTS.BOTTOM,
-  content: "Write your text here.",
-};
-
-Placement.argTypes = {
-  size: {
-    options: Object.values(SIZE_OPTIONS),
-    control: {
-      type: "select",
+    info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: [
+        "onShow",
+        "enabled",
+        "tabIndex",
+        "renderInPortal",
+        "size",
+        "stopPropagation",
+        "block",
+      ],
     },
   },
-  placement: {
-    options: Object.values(PLACEMENTS),
-    control: {
-      type: "select",
-    },
+
+  args: {
+    content: "Write your text here.",
   },
 };
 
-export const PlacementRtl = ({ size, placement, content }) => {
-  return (
-    <RenderInRtl>
-      <Stack justify="center">
-        <TooltipPrimitive placement={placement} size={size} content={content}>
-          <Icons.Airplane />
-        </TooltipPrimitive>
+export const TooltipPrimitiveOnInlineElement: Story = {
+  render: args => (
+    <Alert icon title="Lorem ipsum dolor sit amet">
+      <Stack>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate
+        eget mollis sed, tempor sed magna. Aliquam erat volutpat. Sed ac dolor sit amet purus
+        malesuada congue. Sed vel lectus.{" "}
+        <TooltipPrimitive {...args}>
+          <Text>
+            Aliquam erat volutpat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+            officia deserunt mollit anim id est laborum.
+          </Text>
+        </TooltipPrimitive>{" "}
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+        anim id est laborum. Sed ac dolor sit amet purus malesuada congue. Sed vel lectus.
       </Stack>
-    </RenderInRtl>
-  );
-};
+    </Alert>
+  ),
 
-PlacementRtl.args = {
-  size: SIZE_OPTIONS.MEDIUM,
-  placement: PLACEMENTS.BOTTOM,
-  content: "Write your text here.",
+  args: {
+    content: "Write your text here.",
+    block: false,
+  },
 };
 
-PlacementRtl.argTypes = {
-  size: {
-    options: Object.values(SIZE_OPTIONS),
-    control: {
-      type: "select",
-    },
+export const TooltipPrimitiveOnBlockElements: Story = {
+  render: args => (
+    <>
+      <TooltipPrimitive {...args}>
+        <Heading>Orbit design system</Heading>
+      </TooltipPrimitive>
+      <div className="mt-lg">
+        <TooltipPrimitive {...args}>
+          <Button fullWidth disabled>
+            Full width & Disabled
+          </Button>
+        </TooltipPrimitive>
+      </div>
+    </>
+  ),
+
+  parameters: {
+    info: "Block prop defines whether the children wrapper is inline or block. Useful when children need to take up the entire container width. Visit Orbit.Kiwi for more detailed guidelines.",
   },
-  placement: {
-    options: Object.values(PLACEMENTS),
-    control: {
-      type: "select",
-    },
+
+  args: {
+    content:
+      "Write your text here. If it’s longer than three lines though, consider format your content in some more structured way.",
+    block: true,
   },
 };
 
-export const WithImageInside = ({ size, placement }) => {
-  return (
+export const WithImageInside: Story = {
+  render: args => (
     <TooltipPrimitive
-      placement={placement}
-      size={size}
+      {...args}
       content={
         <Stack>
           <img
             src="https://images.kiwi.com/illustrations/0x200/Rating-Q85.png"
             alt="Preview
-            of card help in TooltipPrimitive component"
+              of card help in TooltipPrimitive component"
           />
           <Text>
             We take security very seriously. Especially when it comes to your personal and sensitive
@@ -211,135 +149,134 @@ export const WithImageInside = ({ size, placement }) => {
     >
       <Icons.Airplane />
     </TooltipPrimitive>
-  );
-};
-
-WithImageInside.story = {
-  name: "With image inside",
+  ),
 
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    info: "If you want to, you can specify one preferred placement. If it won't be possible to use it, the defaults will be used. Visit Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: [
+        "onShow",
+        "enabled",
+        "tabIndex",
+        "labelClose",
+        "renderInPortal",
+        "stopPropagation",
+        "block",
+      ],
+    },
   },
-};
 
-WithImageInside.args = {
-  size: SIZE_OPTIONS.MEDIUM,
-  placement: PLACEMENTS.BOTTOM,
-};
+  args: {
+    size: SIZE_OPTIONS.MEDIUM,
+    placement: PLACEMENTS.BOTTOM,
+  },
 
-WithImageInside.argTypes = {
-  size: {
-    options: Object.values(SIZE_OPTIONS),
-    control: {
-      type: "select",
+  argTypes: {
+    size: {
+      options: Object.values(SIZE_OPTIONS),
+      control: {
+        type: "select",
+      },
     },
-  },
-  placement: {
-    options: Object.values(PLACEMENTS),
-    control: {
-      type: "select",
+    placement: {
+      options: Object.values(PLACEMENTS),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const Playground = ({
-  content,
-  dataTest,
-  icon,
-  size,
-  tabIndex,
-  error,
-  help,
-  enabled,
-  removeUnderlinedText,
-  placement,
-}) => {
-  const Icon = getIcon(icon);
-
-  return (
-    <Stack flex justify="center">
-      <TooltipPrimitive
-        placement={placement}
-        size={size}
-        content={content}
-        dataTest={dataTest}
-        tabIndex={tabIndex}
-        enabled={enabled}
-        removeUnderlinedText={removeUnderlinedText}
-        error={error}
-        help={help}
-      >
-        <Icon />
-      </TooltipPrimitive>
-    </Stack>
-  );
-};
+export const Playground: Story = {
+  render: ({ children, content, ...args }) => (
+    <Alert icon title="Lorem ipsum dolor sit amet" type="warning">
+      <Stack spacing="none">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate
+        eget mollis sed, tempor sed magna. Cras elementum. Aliquam erat volutpat. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum. Sed ac dolor sit amet purus malesuada congue. Sed vel lectus.{" "}
+        <TooltipPrimitive
+          content={
+            <div>
+              <div>{content}</div>
+              <TextLink>Clickable element.</TextLink>
+            </div>
+          }
+          {...args}
+        >
+          <Text>{children}</Text>
+        </TooltipPrimitive>
+      </Stack>
+    </Alert>
+  ),
 
-Playground.story = {
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
-
-Playground.args = {
-  content: "Write your text here.",
-  dataTest: "test",
-  icon: "Airplane",
-  size: SIZE_OPTIONS.SMALL,
-  tabIndex: "0",
-  error: false,
-  help: false,
-  enabled: true,
-  removeUnderlinedText: false,
-  placement: PLACEMENTS.BOTTOM,
-};
-
-Playground.argTypes = {
-  icon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+    info: "You can try all possible configurations of this component. Visit Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onShow"],
     },
   },
-  size: {
-    options: Object.values(SIZE_OPTIONS),
-    control: {
-      type: "select",
-    },
+
+  args: {
+    children: "Aliquam erat volutpat.",
+    enabled: true,
+    tooltipShown: false,
+    tabIndex: "0",
+    id: "ID",
+    renderInPortal: true,
+    content: "Write your text here.",
+    error: false,
+    help: false,
+    stopPropagation: false,
+    removeUnderlinedText: false,
+    block: false,
+    noFlip: false,
+    offset: [0, 0],
+    ...WithImageInside.args,
   },
-  placement: {
-    options: Object.values(PLACEMENTS),
-    control: {
-      type: "select",
-    },
+
+  argTypes: {
+    ...WithImageInside.argTypes,
   },
 };
 
-export const Rtl = () => {
-  return (
+export const Rtl: Story = {
+  render: ({ content, ...args }) => (
     <RenderInRtl>
-      <Alert icon={<Icons.Airplane />} title="Lorem ipsum dolor sit amet">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate
-        eget mollis sed, tempor sed magna.
-        <TooltipPrimitive content="Write your text here." placement="left">
-          <TextLink>Cras elementum.</TextLink>
-        </TooltipPrimitive>{" "}
-        Aliquam erat volutpat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-        officia deserunt mollit anim id est laborum. Sed ac dolor sit amet purus malesuada congue.
-        Sed vel lectus.{" "}
-        <TooltipPrimitive content="Write your text here.">
-          <Text>Another TooltipPrimitive.</Text>
-        </TooltipPrimitive>{" "}
-        Donec odio tempus molestie, porttitor ut, iaculis quis, sem.
+      <Alert icon title="Lorem ipsum dolor sit amet" type="success">
+        <Stack spacing="none">
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate
+          eget mollis sed, tempor sed magna. Cras elementum. Aliquam erat volutpat. Excepteur sint
+          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum. Sed ac dolor sit amet purus malesuada congue. Sed vel lectus.{" "}
+          <TooltipPrimitive
+            content={
+              <div>
+                <div>{content}</div>
+                <TextLink>Clickable element.</TextLink>
+              </div>
+            }
+            {...args}
+          >
+            <Text>Aliquam erat volutpat.</Text>
+          </TooltipPrimitive>
+        </Stack>
       </Alert>
     </RenderInRtl>
-  );
-};
-
-Rtl.story = {
-  name: "RTL ",
+  ),
 
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    info: "This is a preview of this component in RTL setup.",
+  },
+
+  args: {
+    tooltipShown: false,
+    content: "Write your text here.",
+    block: false,
+    ...WithImageInside.args,
+  },
+
+  argTypes: {
+    ...WithImageInside.argTypes,
   },
 };