Composite: add "With Tooltip" storybook example (#65817)

* Composite: add "With Tooltip" storybook example

* Only use one way to compose Tooltip and Composite

* Simplify code (no need for custom render)

* Rewrite Story JSDocs

* Use third item as an example to render with a custom component

* Do not use Button for thir composite item

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: diegohaz <hazdiego@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

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>
+			</>
+		),
+	},
+};