## Import

```jsx
import { Tooltip } from "@cfa/react-core";
```

## Live Editor

```jsx
<Tooltip.Root>
  <Button>Hover me</Button>
  <Tooltip.Content>Tooltip Content</Tooltip.Content>
</Tooltip.Root>
```

## Design Update

The design of the `Tooltip` has recently been updated. The default background color of the `Tooltip` has been inverted to ensure proper contrast on white backgrounds.

## Examples

### Placement

The `placement` prop can be used to control the position of the Tooltip.Content relative to the trigger element. The default placement is `top`.

The tooltip accepts the following placements: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`, `right-start`, and `right-end`.

```jsx
<div style={{ display: "flex", gap: 16 }}>
  <Tooltip.Root>
    <Button size="sm">Top</Button>
    <Tooltip.Content placement="top">Top Content</Tooltip.Content>
  </Tooltip.Root>

  <Tooltip.Root>
    <Button size="sm">Bottom</Button>
    <Tooltip.Content placement="bottom">Bottom Content</Tooltip.Content>
  </Tooltip.Root>

  <Tooltip.Root>
    <Button size="sm">Left</Button>
    <Tooltip.Content placement="left">Left Content</Tooltip.Content>
  </Tooltip.Root>

  <Tooltip.Root>
    <Button size="sm">Right</Button>
    <Tooltip.Content placement="right">Right Content</Tooltip.Content>
  </Tooltip.Root>
</div>
```

### Custom Trigger

Use the `<Focusable />` component to create a custom trigger for the Tooltip.

The `Focusable` component is an internal React Aria component (exported by React Core) that allows you to create custom focusable elements. More info can be found here: .

```jsx
<Tooltip.Root>
  <Focusable>
    <span role="button">Focus/Hover this span for the tooltip</span>
  </Focusable>
  <Tooltip.Content>Tooltip content</Tooltip.Content>
</Tooltip.Root>
```

### Open

The `defaultOpen` prop can be used to control the initial open state of the tooltip, placed on the `Tooltip.Root` component.

The `isOpen` prop can be used to control the open state of the tooltip. When open, the tooltip will remain open until the `isOpen` prop is set to `'false'`, or the Tooltip loses focus.

```jsx
<Tooltip.Root defaultOpen isOpen>
  <Button>Open</Button>
  <Tooltip.Content>Tooltip Content</Tooltip.Content>
</Tooltip.Root>
```

### Delay

The `delay` prop can be used to control the delay (in milliseconds) before the tooltip is shown or "open". By default, the delay is `1000ms`.

```jsx
<Tooltip.Root delay={2000}>
  <Button>2s Delay</Button>
  <Tooltip.Content>Tooltip Content</Tooltip.Content>
</Tooltip.Root>
```

### Close Delay

Like the `delay` prop, the `closeDelay` prop can be used to control the delay (in milliseconds) before the tooltip is closed.

```jsx
<Tooltip.Root closeDelay={0}>
  <Button>0s Close Delay</Button>
  <Tooltip.Content>Tooltip Content</Tooltip.Content>
</Tooltip.Root>
```

## Props

### Tooltip.Root

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| closeDelay | `number` | `500` | The delay time for the tooltip to close. \[See guidelines]\(https\://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown). |
| defaultOpen | `boolean` | - | Whether the overlay is open by default (uncontrolled). |
| delay | `number` | `1500` | The delay time for the tooltip to show up. \[See guidelines]\(https\://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance). |
| isDisabled | `boolean` | - | Whether the tooltip should be disabled, independent from the trigger. |
| isOpen | `boolean` | - | Whether the overlay is open by default (controlled). |
| onOpenChange | `(isOpen: boolean) => void` | - | Handler that is called when the overlay's open state changes. |
| shouldCloseOnPress | `boolean` | `true` | Whether the tooltip should close when the trigger is pressed. |
| trigger | `"hover" \ | "focus"` | `'hover'` | By default, opens for both focus and hover. Can be made to open only for focus. |

### Tooltip.Content

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| placement | `Placements` | - | The placement of the tooltip with respect to the trigger. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| arrowBoundaryOffset | `number` | `0` | The minimum distance the arrow's edge should be from the edge of the overlay element. |
| className | `ClassNameOrFunction<TooltipRenderProps>` | `'react-aria-Tooltip'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| containerPadding | `number` | `12` | The placement padding that should be applied between the element and its&#xA;surrounding container. |
| crossOffset | `number` | `0` | The additional offset applied along the cross axis between the element and its&#xA;anchor element. |
| defaultOpen | `boolean` | - | Whether the overlay is open by default (uncontrolled). |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| inert | `boolean` | - | - |
| isEntering | `boolean` | - | Whether the tooltip is currently performing an entry animation. |
| isExiting | `boolean` | - | Whether the tooltip is currently performing an exit animation. |
| isOpen | `boolean` | - | Whether the element is rendered. |
| lang | `string` | - | - |
| offset | `number` | `0` | The additional offset applied along the main axis between the element and its&#xA;anchor element. |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onOpenChange | `(isOpen: boolean) => void` | - | Handler that is called when the overlay's open state changes. |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| render | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| shouldFlip | `boolean` | `true` | Whether the element should flip its orientation (e.g. top to bottom or left to right) when&#xA;there is insufficient room for it to render completely. |
| style | `StyleOrFunction<TooltipRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |
| triggerRef | `RefObject<Element>` | - | The ref for the element which the tooltip positions itself with respect to.&#xA;&#xA;When used within a TooltipTrigger this is set automatically. It is only required when used standalone. |