diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
index d6e4999407e99..c5518375df8a6 100644
--- a/packages/components/src/composite/stories/index.story.tsx
+++ b/packages/components/src/composite/stories/index.story.tsx
@@ -13,6 +13,7 @@ import { useContext, useMemo } from '@wordpress/element';
  */
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 import { Composite } from '..';
+import { Tooltip } from '../../tooltip';
 
 const meta: Meta< typeof Composite > = {
 	title: 'Components/Composite',
@@ -353,3 +354,44 @@ const Fill = ( { children } ) => {
 		},
 	},
 };
+
+/**
+ * Combining the `Tooltip` and `Composite` component has a few caveats. And while there are a few ways to compose these two components, our recommendation is to render `Composite.Item` as a child of `Tooltip`.
+ *
+ * ```jsx
+ * // 🔴 Does not work
+ * <Composite.Item
+ *   render={
+ *     <Tooltip text="Tooltip">
+ *       <button>Item</button>
+ *     </Tooltip>
+ *   }
+ * />
+ *
+ * // 🟢 Good
+ * <Tooltip text="Tooltip one">
+ *   <Composite.Item>
+ *     Item one
+ *   </Composite.Item>
+ * </Tooltip>
+ * ```
+ */
+export const WithTooltips: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		children: (
+			<>
+				<Tooltip text="Tooltip one">
+					<Composite.Item>Item one</Composite.Item>
+				</Tooltip>
+				<Tooltip text="Tooltip two">
+					<Composite.Item>Item two</Composite.Item>
+				</Tooltip>
+				<Tooltip text="Tooltip three">
+					<Composite.Item>Item three</Composite.Item>
+				</Tooltip>
+			</>
+		),
+	},
+};