From a65fc2a3e205c679a56fd5b655d595a09af44d45 Mon Sep 17 00:00:00 2001
From: toniwowtscherk <toni.wowtscherk@contentful.com>
Date: Tue, 14 Oct 2025 13:31:31 +0200
Subject: [PATCH] style(tooltip component line break and max-width): improved
 readability, accessibility and appeal

added max-width:350px; to add a line break and improved component handling
---
 .changeset/tooltip-long-content-examples.md   |  5 ++
 .../tooltip/stories/Tooltip.stories.tsx       | 71 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 .changeset/tooltip-long-content-examples.md

diff --git a/.changeset/tooltip-long-content-examples.md b/.changeset/tooltip-long-content-examples.md
new file mode 100644
index 0000000000..221c462ed3
--- /dev/null
+++ b/.changeset/tooltip-long-content-examples.md
@@ -0,0 +1,5 @@
+---
+"@contentful/f36-tooltip": patch
+---
+
+Add comprehensive Storybook examples demonstrating tooltip behavior with long content across different placements and maxWidth configurations
\ No newline at end of file
diff --git a/packages/components/tooltip/stories/Tooltip.stories.tsx b/packages/components/tooltip/stories/Tooltip.stories.tsx
index a2901bb94b..b20e80caf6 100644
--- a/packages/components/tooltip/stories/Tooltip.stories.tsx
+++ b/packages/components/tooltip/stories/Tooltip.stories.tsx
@@ -241,3 +241,74 @@ export const WithReactElement = () => {
     </>
   );
 };
+
+export const WithLongContent = () => {
+  const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.`;
+
+  const leftAlignedContent = (
+    <div style={{ textAlign: 'left' }}>{longText}</div>
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '60px',
+        padding: '60px',
+        minHeight: '800px',
+      }}
+    >
+      <SectionHeading as="h3" marginBottom="spacingS">
+        Long tooltip content - Top placement
+      </SectionHeading>
+
+      <Flex marginBottom="spacingL">
+        <Tooltip content={leftAlignedContent} maxWidth={350} placement="top">
+          <TextLink href="/">Hover for tooltip above</TextLink>
+        </Tooltip>
+      </Flex>
+
+      <SectionHeading as="h3" marginBottom="spacingS">
+        Long tooltip content - Right placement
+      </SectionHeading>
+
+      <Flex marginBottom="spacingL">
+        <Tooltip content={leftAlignedContent} maxWidth={350} placement="right">
+          <TextLink href="/">Hover for tooltip on right</TextLink>
+        </Tooltip>
+      </Flex>
+
+      <SectionHeading as="h3" marginBottom="spacingS">
+        Long tooltip content - Bottom placement
+      </SectionHeading>
+
+      <Flex marginBottom="spacingL">
+        <Tooltip content={leftAlignedContent} maxWidth={350} placement="bottom">
+          <TextLink href="/">Hover for tooltip below</TextLink>
+        </Tooltip>
+      </Flex>
+
+      <SectionHeading as="h3" marginBottom="spacingS">
+        Long tooltip content - Left placement (narrow)
+      </SectionHeading>
+
+      <Flex marginBottom="spacingL">
+        <Tooltip content={leftAlignedContent} maxWidth={350} placement="left">
+          <TextLink href="/">Hover for tooltip on left (narrow)</TextLink>
+        </Tooltip>
+      </Flex>
+
+      <SectionHeading as="h3" marginBottom="spacingS">
+        Long tooltip content - Left placement (wider)
+      </SectionHeading>
+
+      <Flex marginBottom="spacingL">
+        <Tooltip content={leftAlignedContent} maxWidth={500} placement="left">
+          <TextLink href="/">Hover for tooltip on left (wider)</TextLink>
+        </Tooltip>
+      </Flex>
+    </div>
+  );
+};