# Tooltip Root Management

The `Tooltip` component manages individual tooltip instances, handling open/closed state, timing overrides, and accessibility features. It serves as the root container for each tooltip.

## Capabilities

### Tooltip Component

Root tooltip component that manages state and provides context for trigger, portal, and content components.

```typescript { .api }
/**
 * Root tooltip component managing individual tooltip state
 * @param children - Child components (trigger, portal, content)
 * @param open - Controlled open state
 * @param defaultOpen - Initial open state for uncontrolled usage
 * @param onOpenChange - Callback when open state changes
 * @param delayDuration - Override provider delay duration
 * @param disableHoverableContent - Override provider hover behavior
 */
interface TooltipProps {
  children?: React.ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  delayDuration?: number;
  disableHoverableContent?: boolean;
}

const Tooltip: React.FC<TooltipProps>;
```

**Usage Examples:**

```typescript
import { TooltipProvider, Tooltip } from "@radix-ui/react-tooltip";

// Basic uncontrolled tooltip
function BasicTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        {/* Trigger and content components */}
      </Tooltip>
    </TooltipProvider>
  );
}

// Controlled tooltip with custom state
function ControlledTooltip() {
  const [open, setOpen] = React.useState(false);
  
  return (
    <TooltipProvider>
      <Tooltip open={open} onOpenChange={setOpen}>
        {/* Trigger and content components */}
      </Tooltip>
    </TooltipProvider>
  );
}

// Default open tooltip
function DefaultOpenTooltip() {
  return (
    <TooltipProvider>
      <Tooltip defaultOpen>
        {/* Tooltip starts open */}
      </Tooltip>
    </TooltipProvider>
  );
}

// Custom delay for specific tooltip
function CustomDelayTooltip() {
  return (
    <TooltipProvider delayDuration={700}>
      <Tooltip delayDuration={200}>
        {/* This tooltip opens faster than provider default */}
      </Tooltip>
    </TooltipProvider>
  );
}
```

### Tooltip Props

#### open

Controls the open state in controlled mode.

- **Type**: `boolean`
- **Description**: When provided, tooltip becomes controlled and ignores internal state

#### defaultOpen

Sets initial open state for uncontrolled tooltips.

- **Type**: `boolean`
- **Default**: `false`
- **Description**: Initial open state when tooltip is uncontrolled

#### onOpenChange

Callback triggered when tooltip open state changes.

- **Type**: `(open: boolean) => void`
- **Description**: Called with new open state when tooltip opens or closes

#### delayDuration

Overrides provider delay duration for this tooltip instance.

- **Type**: `number`
- **Description**: Duration in milliseconds from pointer enter until tooltip opens

#### disableHoverableContent

Overrides provider hover behavior for this tooltip instance.

- **Type**: `boolean`
- **Description**: When `true`, tooltip closes when pointer leaves trigger

### State Management

The Tooltip component provides two state management patterns:

**Uncontrolled (Internal State)**:
```typescript
<Tooltip defaultOpen={false}>
  {/* Tooltip manages its own state */}
</Tooltip>
```

**Controlled (External State)**:
```typescript
const [open, setOpen] = useState(false);
<Tooltip open={open} onOpenChange={setOpen}>
  {/* You control the state */}
</Tooltip>
```

### Tooltip Context

The Tooltip component creates context providing:

- **Content ID**: Unique identifier for accessibility
- **Open state**: Current open/closed state
- **State attribute**: CSS state attribute (`closed`, `delayed-open`, `instant-open`)
- **Trigger reference**: Reference to trigger element
- **Event handlers**: Functions for opening, closing, and state changes
- **Configuration**: Delay and hover behavior settings

### Tooltip Aliases

```typescript { .api }
const Root: React.FC<TooltipProps>;
```

The `Root` component is an alias for `Tooltip` for shorter import names.

## Types

```typescript { .api }
type TooltipProps = {
  children?: React.ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  delayDuration?: number;
  disableHoverableContent?: boolean;
};
```