diff --git a/front/src/modules/ui/tooltip/AppTooltip.tsx b/front/src/modules/ui/tooltip/AppTooltip.tsx
index f7d3e40f1c16..6aa4f96073b3 100644
--- a/front/src/modules/ui/tooltip/AppTooltip.tsx
+++ b/front/src/modules/ui/tooltip/AppTooltip.tsx
@@ -1,6 +1,13 @@
 import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
 
+export enum TooltipPosition {
+  Top = 'top',
+  Left = 'left',
+  Right = 'right',
+  Bottom = 'bottom',
+}
+
 export const AppTooltip = styled(Tooltip)`
   background-color: ${({ theme }) => theme.background.primary};
   box-shadow: ${({ theme }) => theme.boxShadow.light};
diff --git a/front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx b/front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx
index e6c6f40cd5f4..b24d0632b3ee 100644
--- a/front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx
+++ b/front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx
@@ -55,6 +55,7 @@ export function OverflowingTextWithTooltip({
   return (
     <>
       <StyledOverflowingText
+        data-testid="tooltip"
         ref={textRef}
         id={textElementId}
         cursorPointer={isTitleOverflowing}
diff --git a/front/src/modules/ui/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx b/front/src/modules/ui/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
new file mode 100644
index 000000000000..7fd800b86d44
--- /dev/null
+++ b/front/src/modules/ui/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { OverflowingTextWithTooltip } from '../OverflowingTextWithTooltip';
+
+const placeholderText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus diam, rhoncus nec consequat quis, dapibus quis massa. Praesent tincidunt augue at ex bibendum, non finibus augue faucibus. In at gravida orci. Nulla facilisi. Proin ut augue ut nisi pellentesque tristique. Proin sodales libero id turpis tincidunt posuere.';
+
+const meta: Meta<typeof OverflowingTextWithTooltip> = {
+  title: 'UI/Tooltip/OverflowingTextWithTooltip',
+  component: OverflowingTextWithTooltip,
+};
+
+export default meta;
+type Story = StoryObj<typeof OverflowingTextWithTooltip>;
+
+export const Default: Story = {
+  args: {
+    text: placeholderText,
+  },
+  decorators: [ComponentDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tooltip = await canvas.findByTestId('tooltip');
+    userEvent.hover(tooltip);
+  },
+};
diff --git a/front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx b/front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx
new file mode 100644
index 000000000000..4e152b2ec3c2
--- /dev/null
+++ b/front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { AppTooltip as Tooltip, TooltipPosition } from '../AppTooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'UI/Tooltip/Tooltip',
+  component: Tooltip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    place: TooltipPosition.Bottom,
+    content: 'Tooltip Test',
+    isOpen: true,
+    anchorSelect: '#hover-text',
+  },
+  decorators: [ComponentDecorator],
+  render: (args) => (
+    <>
+      <p id="hover-text" data-testid="tooltip">
+        Hover me!
+      </p>
+      <Tooltip {...args} />
+    </>
+  ),
+};
+
+export const Catalog: Story = {
+  args: { isOpen: true, content: 'Tooltip Test' },
+  play: async ({ canvasElement }) => {
+    Object.values(TooltipPosition).forEach((position) => {
+      const element = canvasElement.querySelector(
+        `#${position}`,
+      ) as HTMLElement;
+      element.style.margin = '75px';
+    });
+  },
+  parameters: {
+    catalog: [
+      {
+        name: 'anchorSelect',
+        values: Object.values(TooltipPosition),
+        props: (anchorSelect: TooltipPosition) => ({
+          anchorSelect: `#${anchorSelect}`,
+          place: anchorSelect,
+        }),
+      },
+    ],
+  },
+  decorators: [CatalogDecorator],
+};
diff --git a/front/src/testing/decorators/CatalogDecorator.tsx b/front/src/testing/decorators/CatalogDecorator.tsx
index f8e5ffb5427f..5b78e162625d 100644
--- a/front/src/testing/decorators/CatalogDecorator.tsx
+++ b/front/src/testing/decorators/CatalogDecorator.tsx
@@ -96,7 +96,7 @@ export const CatalogDecorator: Decorator = (Story, context) => {
                     <RowTitle>{variable2.labels?.(value2) || value2}</RowTitle>
                   )}
                   {variable1.values.map((value1: string) => (
-                    <ElementContainer key={value1}>
+                    <ElementContainer key={value1} id={value1}>
                       {(variable1.labels?.(value1) || value1) && (
                         <ElementTitle>
                           {variable1.labels?.(value1) || value1}