Tooltip.Arrow adjustments

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

@@ -239,12 +239,36 @@ To prevent the content inside from being hoverable, use the `hoverable` prop:
 This has accessibility consequences and should only be disabled when necessary, such as in high-density UIs where tooltips can block other nearby controls.
 :::
 
+### Arrow
+
+To add an arrow (caret or triangle) inside the tooltip content that points toward the center of the anchor element, use the `Tooltip.Arrow` component:
+
+```js
+<Tooltip.Content>
+  Tooltip
+  <Tooltip.Arrow width={10} height={5} tipRadius={1} />
+</Tooltip.Content>
+```
+
+Its `width`, `height`, `tipRadius`, `fill`, `stroke`, `strokeWidth`, and `d` prop can be modified. For example, you can use a fancily rounded arrow like so:
+
+```jsx
+<Tooltip.Content>
+  Tooltip
+  <Tooltip.Arrow
+    width={20}
+    height={20}
+    d="M0 20C0 20 2.06906 19.9829 5.91817 15.4092C7.49986 13.5236 8.97939 12.3809 10.0002 12.3809C11.0202 12.3809 12.481 13.6451 14.0814 15.5472C17.952 20.1437 20 20 20 20H0Z"
+  />
+</Tooltip.Content>
+```
+
 ### Styling
 
 The `Tooltip.Content` element receives the following CSS variables:
 
 - `--anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the tooltip with its anchor.
-- `--anchor-height`: Specifies the height of the anchor element. You can use this to match the width of the tooltip with its anchor.
+- `--anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the tooltip with its anchor.
 - `--available-width`: Specifies the available width of the tooltip element before it overflows the viewport.
 - `--available-height`: Specifies the available height of the tooltip element before it overflows the viewport.
 - `--transform-origin`: Specifies the origin of the floating element that represents the point of the anchor element's center. When animating scale, this allows it to correctly emanate from the center of the anchor.

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

@@ -1,5 +1,9 @@
 {
-  "props": {},
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "hideWhenUncentered": { "type": { "name": "bool" }, "default": "false" },
+    "render": { "type": { "name": "func" } }
+  },
   "name": "TooltipArrow",
   "imports": [
     "import { TooltipArrow } from '@mui/base/Tooltip';",

docs/translations/api-docs-base/tooltip-arrow/tooltip-arrow.json

@@ -1,5 +1,13 @@
 {
   "componentDescription": "The tooltip arrow caret element.",
-  "propDescriptions": {},
+  "propDescriptions": {
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "hideWhenUncentered": {
+      "description": "If <code>true</code>, the arrow will be hidden when it can&#39;t point to the center of the anchor element."
+    },
+    "render": { "description": "A function to customize rendering of the component." }
+  },
   "classDescriptions": {}
 }

packages/mui-base/src/Tooltip/Tooltip.types.ts

@@ -90,8 +90,8 @@ export interface TooltipAnchorFragmentProps {
   children: React.ReactElement | ((htmlProps: GenericHTMLProps) => React.ReactElement);
 }
 export interface TooltipArrowProps
-  extends Omit<BaseUIComponentProps<any, TooltipOwnerState>, 'context'>,
-    FloatingArrowProps {
+  extends BaseUIComponentProps<any, TooltipOwnerState>,
+    Omit<FloatingArrowProps, 'context' | 'className'> {
   /**
    * If `true`, the arrow will be hidden when it can't point to the center of the anchor element.
    * @default false

packages/mui-base/src/Tooltip/TooltipArrow.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { FloatingArrow, FloatingContext } from '@floating-ui/react';
+import { FloatingArrow, type FloatingContext } from '@floating-ui/react';
 import type { TooltipArrowProps } from './Tooltip.types';
 import { resolveClassName } from '../utils/resolveClassName';
 import { useForkRef } from '../utils/useForkRef';
@@ -9,7 +9,7 @@ import { useTooltipContentContext } from './TooltipContentContext';
 function defaultRender(
   props: Omit<TooltipArrowProps, 'className'> & { context: FloatingContext; className?: string },
 ) {
-  return <FloatingArrow {...props} />;
+  return <FloatingArrow strokeWidth={1} stroke="transparent" {...props} />;
 }
 
 /**
@@ -27,13 +27,7 @@ const TooltipArrow = React.forwardRef(function TooltipArrow(
   props: TooltipArrowProps,
   forwardedRef: React.Ref<SVGSVGElement>,
 ) {
-  const {
-    render: renderProp,
-    className,
-    context,
-    hideWhenUncentered = false,
-    ...otherProps
-  } = props;
+  const { render: renderProp, className, hideWhenUncentered = false, ...otherProps } = props;
   const render = renderProp ?? defaultRender;
 
   const { open, arrowRef, floatingContext, side, alignment } = useTooltipContentContext();
@@ -66,4 +60,32 @@ const TooltipArrow = React.forwardRef(function TooltipArrow(
   return render(arrowProps, ownerState);
 });
 
+TooltipArrow.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * If `true`, the arrow will be hidden when it can't point to the center of the anchor element.
+   * @default false
+   */
+  hideWhenUncentered: PropTypes.bool,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.func,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+} as any;
+
 export { TooltipArrow };