docs(react-tooltip): Add info icon + tooltip story to Tooltip stories (…

…microsoft#28611)

* docs: Add info tooltip story to Tooltip stories.

* removing space

* fix story

* rename

packages/react-components/react-tooltip/stories/Tooltip/TooltipIcon.stories.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Label, makeStyles, mergeClasses, tokens, Tooltip, useId } from '@fluentui/react-components';
+import { Info16Regular } from '@fluentui/react-icons';
+import type { TooltipProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    columnGap: tokens.spacingVerticalS,
+  },
+  visible: {
+    color: tokens.colorNeutralForeground2BrandSelected,
+  },
+});
+
+export const Icon = (props: Partial<TooltipProps>) => {
+  const styles = useStyles();
+  const iconId = useId('icon');
+  const contentId = useId('content');
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <div aria-owns={visible ? contentId : undefined} className={styles.root}>
+      <Label>This is an icon with a Tooltip to show extra information</Label>
+      <Tooltip
+        content={{
+          children: 'Content must never contain focusable elements.',
+          id: contentId,
+        }}
+        positioning="above-start"
+        withArrow
+        relationship="label"
+        onVisibleChange={(e, data) => setVisible(data.visible)}
+        {...props}
+      >
+        <Info16Regular
+          tabIndex={0}
+          id={iconId}
+          aria-labelledby={`${iconId} ${contentId}`}
+          className={mergeClasses(visible && styles.visible)}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+Icon.parameters = {
+  docs: {
+    description: {
+      story: `Tooltips can be attached to icons to create an info icon.`,
+    },
+  },
+};

packages/react-components/react-tooltip/stories/Tooltip/index.stories.tsx

@@ -12,6 +12,7 @@ export { CustomMount } from './TooltipCustomMount.stories';
 export { Controlled } from './TooltipControlled.stories';
 export { Positioning } from './TooltipPositioning.stories';
 export { Target } from './TooltipTarget.stories';
+export { Icon } from './TooltipIcon.stories';
 
 export default {
   title: 'Components/Tooltip',