Tooltip: Update the component markup for a11y remediations & refactor the existing styles towards more static styling

.changeset/flat-drinks-retire.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Tooltip: Address accessibility remediations and refactor styles towards more static styling

docs/content/Tooltip.mdx

@@ -4,7 +4,7 @@ title: Tooltip
 status: Alpha
 ---
 
-import data from '../../src/Tooltip.docs.json'
+import data from '../../src/Tooltip/Tooltip.docs.json'
 
 The Tooltip component adds a tooltip to add context to interactive elements on the page.
 
@@ -20,10 +20,85 @@ A tooltip may only be used on an element that is interactive such as a button or
 
 ## Examples
 
+### Default (As a label type)
+
+```jsx live
+<Tooltip aria-label="Search on the documentation">
+  <Button>
+    <SearchIcon />
+  </Button>
+</Tooltip>
+```
+
+### As a description type
+
+```jsx live
+<Tooltip text="This is a supplementary text for the save button" type="description">
+  <Button>Save</Button>
+</Tooltip>
+```
+
+### With direction
+
 ```jsx live
-<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
-  <Tooltip aria-label="Hello, Tooltip!">
-    <Button>Hover me</Button>
+<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
+  <Tooltip direction="n" text="Supplementary text" type="description">
+    <Button>North</Button>
+  </Tooltip>
+  <Tooltip direction="s" text="Supplementary text" type="description">
+    <Button>South</Button>
+  </Tooltip>
+  <Tooltip direction="e" text="Supplementary text" type="description">
+    <Button>East</Button>
+  </Tooltip>
+  <Tooltip direction="w" text="Supplementary text" type="description">
+    <Button>West</Button>
+  </Tooltip>
+  <Tooltip direction="ne" text="Supplementary text" type="description">
+    <Button>North East</Button>
+  </Tooltip>
+  <Tooltip direction="nw" text="Supplementary text" type="description">
+    <Button>North West</Button>
+  </Tooltip>
+  <Tooltip direction="se" text="Supplementary text" type="description">
+    <Button>Southeast</Button>
+  </Tooltip>
+  <Tooltip direction="sw" text="Supplementary text" type="description">
+    <Button>Southwest</Button>
+  </Tooltip>
+</Box>
+```
+
+### With wrap
+
+```jsx live
+<Tooltip
+  direction="n"
+  wrap
+  text="Random long text that needs to be wrapped and be multipline and have some paddings around"
+  type="description"
+>
+  <Button>Multiline</Button>
+</Tooltip>
+```
+
+### With no delay
+
+```jsx live
+<Tooltip noDelay text="Supplemetary text" type="description" direction="se">
+  <Button>Button</Button>
+</Tooltip>
+```
+
+### With align
+
+```jsx live
+<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
+  <Tooltip align="left" text="Supplemetary text" type="description">
+    <Button>Align Left</Button>
+  </Tooltip>
+  <Tooltip align="right" text="Supplemetary text" type="description">
+    <Button>Align Right</Button>
   </Tooltip>
 </Box>
 ```

generated/components.json

@@ -295,44 +295,6 @@
       ],
       "subcomponents": []
     },
-    "tooltip": {
-      "id": "tooltip",
-      "name": "Tooltip",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "align",
-          "type": "'left' | 'right'"
-        },
-        {
-          "name": "direction",
-          "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
-          "description": "Sets where the tooltip renders in relation to the target."
-        },
-        {
-          "name": "noDelay",
-          "type": "boolean",
-          "description": "When set to `true`, tooltip appears without any delay."
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Text used in `aria-label` (for accessibility)"
-        },
-        {
-          "name": "wrap",
-          "type": "boolean",
-          "description": "Use `true` to allow text within tooltip to wrap."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": []
-    },
     "truncate": {
       "id": "truncate",
       "name": "Truncate",
@@ -4677,6 +4639,61 @@
         }
       ]
     },
+    "tooltip": {
+      "id": "tooltip",
+      "name": "Tooltip",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-tooltip--default",
+          "code": "() => (\n  <Box\n    sx={{\n      p: 5,\n    }}\n  >\n    <Tooltip aria-label=\"Filter vegetarian options\" direction=\"e\">\n      <Button>🥦</Button>\n    </Tooltip>\n  </Box>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "align",
+          "type": "'left' | 'right'"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Should be utilised for label type tooltips and it is going to be used to label the tooltip trigger."
+        },
+        {
+          "name": "direction",
+          "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
+          "defaultValue": "n",
+          "description": "Sets where the tooltip renders in relation to the target."
+        },
+        {
+          "name": "noDelay",
+          "type": "boolean",
+          "description": "When set to `true`, tooltip appears without any delay."
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "description": "Should be utilised for description type tooltips and it is going to be used to describe the tooltip trigger."
+        },
+        {
+          "name": "type",
+          "type": "'label' | 'description'",
+          "defaultValue": "label",
+          "description": "The type of tooltip. `label` is used for labelling the element that triggers tooltip. `description` is used for describing or adding a suplementary information to the element that triggers the tooltip."
+        },
+        {
+          "name": "wrap",
+          "type": "boolean",
+          "description": "Use `true` to allow text within tooltip to wrap."
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": []
+    },
     "tree_view": {
       "id": "tree_view",
       "name": "TreeView",