[Tooltip] Component and Hook

docs/data/base/components/tooltip/UnstyledTooltipIntroduction/system/index.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Tooltip } from '@mui/base/Tooltip';
+import { styled } from '@mui/system';
+
+export default function UnstyledTooltipIntroduction() {
+  return (
+    <Tooltip anchorGap={5}>
+      <Tooltip.AnchorFragment>
+        <AnchorButton type="button">Anchor</AnchorButton>
+      </Tooltip.AnchorFragment>
+      <TooltipContent>Tooltip</TooltipContent>
+    </Tooltip>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const TooltipContent = styled(Tooltip.Content)`
+  ${({ theme }) => `
+    background: ${theme.palette.mode === 'dark' ? 'white' : '#333'};
+    color: ${theme.palette.mode === 'dark' ? 'black' : 'white'};
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 95%;
+  `}
+`;
+
+export const AnchorButton = styled('button')`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;

docs/data/base/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Tooltip } from '@mui/base/Tooltip';
+import { styled } from '@mui/system';
+
+export default function UnstyledTooltipIntroduction() {
+  return (
+    <Tooltip anchorGap={5}>
+      <Tooltip.AnchorFragment>
+        <AnchorButton type="button">Anchor</AnchorButton>
+      </Tooltip.AnchorFragment>
+      <TooltipContent>Tooltip</TooltipContent>
+    </Tooltip>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const TooltipContent = styled(Tooltip.Content)`
+  ${({ theme }) => `
+    background: ${theme.palette.mode === 'dark' ? 'white' : '#333'};
+    color: ${theme.palette.mode === 'dark' ? 'black' : 'white'};
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 95%;
+  `}
+`;
+
+export const AnchorButton = styled('button')`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;

docs/data/base/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx.preview

@@ -0,0 +1,6 @@
+<Tooltip anchorGap={5}>
+  <Tooltip.AnchorFragment>
+    <AnchorButton type="button">Anchor</AnchorButton>
+  </Tooltip.AnchorFragment>
+  <TooltipContent>Tooltip</TooltipContent>
+</Tooltip>

docs/data/base/components/tooltip/tooltip.md

@@ -1,14 +1,136 @@
 ---
 productId: base-ui
 title: React Tooltip component
+components: Tooltip, TooltipContent, TooltipAnchorFragment, TooltipDelayGroup
 githubLabel: 'component: tooltip'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 ---
 
-# Tooltip 🚧
+# Tooltip
 
 <p class="description">Tooltips display informative text when users hover over, focus on, or tap an element.</p>
 
-:::warning
-The Base UI Tooltip component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/32) to see it arrive sooner.
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
+## Introduction
+
+{{"demo": "UnstyledTooltipIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
+
+## Component
+
+```jsx
+import { Tooltip } from '@mui/base/Tooltip';
+```
+
+### Anatomy
+
+The `Tooltip` component is composed of a root component that contains two main subcomponents: `AnchorFragment` and `Content`.
+
+```jsx
+<Tooltip>
+  <Tooltip.AnchorFragment />
+  <Tooltip.Content>
+    <Tooltip.Arrow />
+  </Tooltip.Content>
+</Tooltip>
+```
+
+- `Content` is the tooltip element itself.
+- `AnchorFragment` provides props for its child element that lets the `Content` element be anchored to it.
+- `Arrow` is an optional element for displaying a caret (or triangle) that points to the center of the anchor.
+
+```jsx
+<Tooltip>
+  <Tooltip.AnchorFragment>
+    <button type="button">Anchor</button>
+  </Tooltip.AnchorFragment>
+  <Tooltip.Content>Tooltip</Tooltip.Content>
+</Tooltip>
+```
+
+### Placement
+
+By default, the tooltip is placed on the top side of its anchor. To change this, use the `placement` prop:
+
+```jsx
+<Tooltip placement="right">
+  <Tooltip.AnchorFragment>
+    <button type="button">Anchor</button>
+  </Tooltip.AnchorFragment>
+  <Tooltip.Content>Tooltip</Tooltip.Content>
+</Tooltip>
+```
+
+There are 12 possible placements:
+
+- Centered placements: `top`, `right`, `bottom`, `left`.
+- Edge-aligned placements: `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`.
+
+The edge-aligned placements are logical, adapting to the writing direction (LTR or RTL) as expected.
+
+### Anchor gap
+
+To increase the gap between the anchor and its tooltip, use the `anchorGap` prop:
+
+```jsx
+<Tooltip anchorGap={10}>
+```
+
+### Delay
+
+To delay the tooltip from showing or hiding, use the `delay` prop, which represents how long the tooltip will wait after being triggered to show in milliseconds:
+
+```jsx
+<Tooltip delay={200}>
+```
+
+The open and close delay can be separately configured:
+
+```jsx
+<Tooltip delay={{ open: 500, close: 200 }}>
+```
+
+### Open state
+
+To control the tooltip with external state, use the `open` and `onOpenChange` props:
+
+```jsx
+function App() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Tooltip open={open} onOpenChange={setOpen}>
+      {/* Subcomponents */}
+    </Tooltip>
+  );
+}
+```
+
+### Default open
+
+To show the tooltip initially while leaving it uncontrolled, use the `defaultOpen` prop:
+
+```jsx
+<Tooltip defaultOpen>
+```
+
+### Hoverable content
+
+To prevent the content inside from being hoverable, use the `disableHoverableContent` prop:
+
+```jsx
+<Tooltip disableHoverableContent>
+```
+
+:::info
+This should only be disabled when necessary, such as in high-density UIs where tooltips can block other controls.
 :::
+
+### Touch input
+
+To prevent the tooltip from showing when using touch input, use the `allowTouch` prop:
+
+```jsx
+<Tooltip allowTouch={false}>
+```

docs/data/base/pagesApi.js

@@ -75,6 +75,19 @@ module.exports = [
     pathname: '/base-ui/react-textarea-autosize/components-api/#textarea-autosize',
     title: 'TextareaAutosize',
   },
+  { pathname: '/base-ui/react-tooltip/components-api/#tooltip', title: 'Tooltip' },
+  {
+    pathname: '/base-ui/react-tooltip/components-api/#tooltip-anchor-fragment',
+    title: 'TooltipAnchorFragment',
+  },
+  {
+    pathname: '/base-ui/react-tooltip/components-api/#tooltip-content',
+    title: 'TooltipContent',
+  },
+  {
+    pathname: '/base-ui/react-tooltip/components-api/#tooltip-delay-group',
+    title: 'TooltipDelayGroup',
+  },
   {
     pathname: '/base-ui/react-autocomplete/hooks-api/#use-autocomplete',
     title: 'useAutocomplete',

docs/pages/base-ui/api/tooltip-anchor-fragment.json

@@ -0,0 +1,14 @@
+{
+  "props": {},
+  "name": "TooltipAnchorFragment",
+  "imports": [
+    "import { TooltipAnchorFragment } from '@mui/base/Tooltip';",
+    "import { TooltipAnchorFragment } from '@mui/base';"
+  ],
+  "classes": [],
+  "muiName": "TooltipAnchorFragment",
+  "filename": "/packages/mui-base/src/Tooltip/TooltipAnchorFragment.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-tooltip/\">Tooltip</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/tooltip-content.json

@@ -0,0 +1,17 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "func" } }
+  },
+  "name": "TooltipContent",
+  "imports": [
+    "import { TooltipContent } from '@mui/base/Tooltip';",
+    "import { TooltipContent } from '@mui/base';"
+  ],
+  "classes": [],
+  "muiName": "TooltipContent",
+  "filename": "/packages/mui-base/src/Tooltip/TooltipContent.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-tooltip/\">Tooltip</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/tooltip-delay-group.json

@@ -0,0 +1,14 @@
+{
+  "props": {},
+  "name": "TooltipDelayGroup",
+  "imports": [
+    "import { TooltipDelayGroup } from '@mui/base/Tooltip';",
+    "import { TooltipDelayGroup } from '@mui/base';"
+  ],
+  "classes": [],
+  "muiName": "TooltipDelayGroup",
+  "filename": "/packages/mui-base/src/Tooltip/TooltipDelayGroup.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-tooltip/\">Tooltip</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/tooltip.json

@@ -0,0 +1,16 @@
+{
+  "props": {},
+  "name": "Tooltip",
+  "imports": [
+    "import { Tooltip } from '@mui/base/Tooltip';",
+    "import { Tooltip } from '@mui/base';"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "Tooltip",
+  "filename": "/packages/mui-base/src/Tooltip/Tooltip.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-tooltip/\">Tooltip</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/use-tooltip.json

@@ -0,0 +1,60 @@
+{
+  "parameters": {
+    "alignmentOffset": { "type": { "name": "number", "description": "number" }, "default": "0" },
+    "allowTouch": { "type": { "name": "boolean", "description": "boolean" }, "default": "true" },
+    "anchorGap": { "type": { "name": "number", "description": "number" }, "default": "0" },
+    "defaultOpen": { "type": { "name": "boolean", "description": "boolean" } },
+    "delay": {
+      "type": {
+        "name": "number | { open?: number; close?: number }",
+        "description": "number | { open?: number; close?: number }"
+      },
+      "default": "0"
+    },
+    "disableHoverableContent": {
+      "type": { "name": "boolean", "description": "boolean" },
+      "default": "false"
+    },
+    "onOpenChange": {
+      "type": {
+        "name": "(isOpen: boolean, event: Event) => void",
+        "description": "(isOpen: boolean, event: Event) => void"
+      }
+    },
+    "open": { "type": { "name": "boolean", "description": "boolean" } },
+    "placement": {
+      "type": { "name": "Placement", "description": "Placement" },
+      "default": "'top'"
+    },
+    "type": {
+      "type": {
+        "name": "'label' | 'description' | 'visual-only'",
+        "description": "'label' | 'description' | 'visual-only'"
+      },
+      "default": "'description'"
+    }
+  },
+  "returnValue": {
+    "getAnchorProps": {
+      "type": {
+        "name": "(externalProps?: React.HTMLAttributes<HTMLElement>) => React.HTMLAttributes<HTMLElement>",
+        "description": "(externalProps?: React.HTMLAttributes<HTMLElement>) => React.HTMLAttributes<HTMLElement>"
+      },
+      "required": true
+    },
+    "getTooltipProps": {
+      "type": {
+        "name": "(externalProps?: React.HTMLAttributes<HTMLElement>) => React.HTMLAttributes<HTMLElement>",
+        "description": "(externalProps?: React.HTMLAttributes<HTMLElement>) => React.HTMLAttributes<HTMLElement>"
+      },
+      "required": true
+    }
+  },
+  "name": "useTooltip",
+  "filename": "/packages/mui-base/src/useTooltip/useTooltip.ts",
+  "imports": [
+    "import { useTooltip } from '@mui/base/useTooltip';",
+    "import { useTooltip } from '@mui/base';"
+  ],
+  "demos": "<ul></ul>"
+}