Revert accessible Tooltip + IconButton

docs/content/IconButton.mdx

@@ -35,16 +35,6 @@ A separate component called `IconButton` is used if the action shows only an ico
 </>
 ```
 
-### Customize description / tooltip text
-
-To add description for the button, wrap `IconButton` in a `Tooltip`. Make sure you pass `aria-label` to the button as well.
-
-```jsx live
-<Tooltip text="You have no unread notifications">
-  <IconButton icon={BellIcon} aria-label="Notifications" />
-</Tooltip>
-```
-
 ## API reference
 
 Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.

docs/content/Tooltip.md

@@ -0,0 +1,34 @@
+---
+componentId: tooltip
+title: Tooltip
+status: Alpha
+---
+
+The Tooltip component adds a tooltip to add context to elements on the page.
+
+**_⚠️ Usage warning! ⚠️_**
+
+Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.
+
+Before adding a tooltip, please consider: Is this information essential and necessary? Can the UI be made clearer? Can the information be shown on the page by default?
+
+**Attention:** we use aria-label for tooltip contents, because it is crucial that they are accessible to screen reader users. However, aria-label replaces the text content of an element in screen readers, so only use Tooltip on elements with no existing text content, or consider using `title` for supplemental information.
+
+## Default example
+
+```jsx live
+<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
+  <Tooltip aria-label="Hello, Tooltip!">Text with a tooltip</Tooltip>
+</Box>
+```
+
+## Component props
+
+| Name       | Type              | Default | Description                                                                                                         |
+| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------ |
+| align      | String            |         | Can be either `left` or `right`.                                                                                    |
+| direction  | String            |         | Can be one of `n`, `ne`, `e`, `se`, `s`, `sw`, `w`, `nw`. Sets where the tooltip renders in relation to the target. |
+| noDelay    | Boolean           |         | When set to `true`, tooltip appears without any delay                                                               |
+| aria-label | String            |         | Text used in `aria-label` (for accessibility).                                                                      |
+| wrap       | Boolean           |         | Use `true` to allow text within tooltip to wrap.                                                                    |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                                                                |

package.json

@@ -78,7 +78,7 @@
     "npm": ">=7"
   },
   "dependencies": {
-    "@primer/behaviors": "^1.1.3",
+    "@primer/behaviors": "1.1.1",
     "@primer/octicons-react": "16.1.1",
     "@primer/primitives": "7.6.0",
     "@radix-ui/react-polymorphic": "0.0.14",

src/Button/Button.stories.tsx

@@ -1,10 +1,9 @@
-import {BellIcon, EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon} from '@primer/octicons-react'
+import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon} from '@primer/octicons-react'
 import {Meta} from '@storybook/react'
 import React, {useState} from 'react'
 import {Button, ButtonProps, IconButton} from '.'
 import {BaseStyles, ThemeProvider} from '..'
 import Box from '../Box'
-import {Tooltip} from '../Tooltip'
 
 export default {
   title: 'Composite components/Button',
@@ -94,35 +93,6 @@ export const iconButton = ({...args}: ButtonProps) => {
   )
 }
 
-export const iconButtonWithTooltip = ({...args}: ButtonProps) => {
-  return (
-    <>
-      <Box sx={{mt: 4, display: 'grid', gridTemplateColumns: '1fr 1fr', rowGap: 2}}>
-        Default tooltip
-        <span>
-          <IconButton icon={BellIcon} aria-label="Notifications" {...args} />
-        </span>
-        Custom tooltip text
-        <span>
-          <Tooltip text="You have no unread notifications">
-            <IconButton icon={BellIcon} aria-label="Notifications" {...args} />
-          </Tooltip>
-        </span>
-        Custom tooltip direction
-        <span>
-          <Tooltip text="Notifications" direction="e">
-            <IconButton icon={BellIcon} aria-label="Notifications" {...args} />
-          </Tooltip>
-        </span>
-        Disable tooltip
-        <span>
-          <IconButton icon={BellIcon} aria-label="Notifications" disableTooltip {...args} />
-        </span>
-      </Box>
-    </>
-  )
-}
-
 export const WatchCounterButton = ({...args}: ButtonProps) => {
   const [count, setCount] = useState(0)
   return (