docs: update tooltip content from a11y review (#3655)

* update usage and style tab content

* run yarn format

* update images

* update style tab and remove images

* update usage.mdx

* update usage.mdx

* update usage docs with feedback

* update style content from feedback

* update usage docs

* update style docs

* updated style.mdx

* update image typo

* image typo

* update image bug

src/pages/components/tooltip/style.mdx

@@ -7,18 +7,34 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<PageDescription>
+
+The following page documents visual specifications such as color, typography,
+structure, and size.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink>
+<AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
-### Standard tooltip
+### Standard tooltip color
 
 | Element        | Property         | Color token           |
 | -------------- | ---------------- | --------------------- |
-| Label          | text color       | `$text-secondary`     |
+| Label          | text-color       | `$text-secondary`     |
 | Trigger button | svg              | `$icon-secondary`     |
 | Container      | background-color | `$background-inverse` |
-| Text           | color            | `$text-inverse`       |
+| Text           | text-color       | `$text-inverse`       |
 
-#### Interactive states
+#### Standard tooltip interactive states
 
 <br />
 
@@ -31,7 +47,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 <Row>
 <Column colLg={8}>
 
-![Closed and open states for a standard tooltip](images/tooltip-style-1.png)
+![Closed and open states for an icon button tooltip](images/tooltip-style-1.png)
 
 </Column>
 </Row>
@@ -41,17 +57,18 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
   standard tooltip
 </Caption>
 
-### Icon button tooltip
+### Icon button tooltip color
 
 | Element   | Property         | Color token           |
 | --------- | ---------------- | --------------------- |
 | Container | background-color | `$background-inverse` |
-| Text      | color            | `$text-inverse`       |
+| Text      | text-color       | `$text-inverse`       |
 
-#### Interactive states
+#### Icon button tooltip interactive states
 
 Icon button tooltip states rely on what kind of button is being used. Refer to
-button styles for specific hover and focus states.
+[button styles](https://carbondesignsystem.com/components/button/style) for
+specific hover and focus states.
 
 <Row>
 <Column colLg={8}>
@@ -66,16 +83,16 @@ button styles for specific hover and focus states.
   button tooltip
 </Caption>
 
-### Definition tooltip
+### Definition tooltip color
 
 | Element   | Property         | Color token           |
 | --------- | ---------------- | --------------------- |
-| Label     | text color       | `$text-secondary`     |
+| Label     | text-color       | `$text-secondary`     |
 | Trigger   | border           | `$border-strong`      |
 | Container | background-color | `$background-inverse` |
-| Text      | color            | `$text-inverse`       |
+| Text      | text-color       | `$text-inverse`       |
 
-#### Interactive states
+#### Definition tooltip interactive states
 
 <br />
 
@@ -95,14 +112,14 @@ button styles for specific hover and focus states.
 
 <Caption>
   Example of closed (top-left), hover (top-right), active (bottom-left) and
-  focus (bottom-right) states for definition button tooltip
+  focus (bottom-right) states for definition tooltip
 </Caption>
 
 ## Typography
 
 Tooltip labels and text should be set in sentence case.
 
-| Element   | Font-size (px/rem) | Font-weight   | Type token  |
+| Element   | Font size (px/rem) | Font weight   | Type token  |
 | --------- | ------------------ | ------------- | ----------- |
 | Label     | 12 / 0.75          | Regular / 400 | `$label-01` |
 | Body text | 14 / 0.875         | Regular / 400 | `$body-01`  |
@@ -112,9 +129,9 @@ Tooltip labels and text should be set in sentence case.
 All tooltip types have a varying height based on the amount of content they
 contain.
 
-### Standard tooltip
+### Standard tooltip structure
 
-| Element      | Property      | px / rem | Spacing token |
+| Class        | Property      | px / rem | Spacing token |
 | ------------ | ------------- | -------- | ------------- |
 | Container    | max-width     | 288 / 18 | –             |
 |              | padding       | 16 / 1   | `$spacing-05` |
@@ -132,7 +149,7 @@ contain.
   Structure and spacing measurements for a standard tooltip | px / rem
 </Caption>
 
-### Icon button tooltip
+### Icon button tooltip structure
 
 | Class     | Property                    | px / rem  | Spacing token |
 | --------- | --------------------------- | --------- | ------------- |
@@ -151,7 +168,7 @@ contain.
   Structure and spacing measurements for an icon button tooltip | px / rem
 </Caption>
 
-### Definition tooltip
+### Definition tooltip structure
 
 | Element   | Property                    | px / rem | Spacing token |
 | --------- | --------------------------- | -------- | ------------- |
@@ -163,20 +180,20 @@ contain.
 
 <div className="image--fixed">
 
-![Structure and spacing measurements for definition tooltip](images/tooltip-style-6.png)
+![Structure and spacing measurements for a definition tooltip](images/tooltip-style-6.png)
 
 </div>
 
 <Caption>
-  Structure and spacing measurements for definition tooltip | px / rem
+  Structure and spacing measurements for a definition tooltip | px / rem
 </Caption>
 
-### Placement
+### Default placement
 
-Tooltip directions by default are set to auto. Upon opening, tooltips can detect
-the edges of the browser to properly be placed in view so the container does not
+Tooltip directions, by default, are set to auto. Upon opening, tooltips can
+detect the edges of the browser to be placed in view so the container does not
 get cutoff. Tooltips can instead use specific directions and may be
-positioned **top**, **right**, **bottom**, or **left** to the trigger item.
+positioned **top**, **right**, **bottom**, or **left** of the trigger item.
 Tooltips should be placed at least 16px / 1rem off of the bottom of the page and
 not bleed off page or behind other content. On mobile, tooltips can only appear
 below the tooltip icon.
@@ -188,3 +205,9 @@ below the tooltip icon.
 </div>
 
 <Caption>Placement examples for a tooltip</Caption>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and
+leaving any other comments on
+[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).