0
# Tooltip Root Management
1

2
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.
3

4
## Capabilities
5

6
### Tooltip Component
7

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

10
```typescript { .api }
11
/**
12
 * Root tooltip component managing individual tooltip state
13
 * @param children - Child components (trigger, portal, content)
14
 * @param open - Controlled open state
15
 * @param defaultOpen - Initial open state for uncontrolled usage
16
 * @param onOpenChange - Callback when open state changes
17
 * @param delayDuration - Override provider delay duration
18
 * @param disableHoverableContent - Override provider hover behavior
19
 */
20
interface TooltipProps {
21
  children?: React.ReactNode;
22
  open?: boolean;
23
  defaultOpen?: boolean;
24
  onOpenChange?: (open: boolean) => void;
25
  delayDuration?: number;
26
  disableHoverableContent?: boolean;
27
}
28

29
const Tooltip: React.FC<TooltipProps>;
30
```
31

32
**Usage Examples:**
33

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

37
// Basic uncontrolled tooltip
38
function BasicTooltip() {
39
  return (
40
    <TooltipProvider>
41
      <Tooltip>
42
        {/* Trigger and content components */}
43
      </Tooltip>
44
    </TooltipProvider>
45
  );
46
}
47

48
// Controlled tooltip with custom state
49
function ControlledTooltip() {
50
  const [open, setOpen] = React.useState(false);
51
  
52
  return (
53
    <TooltipProvider>
54
      <Tooltip open={open} onOpenChange={setOpen}>
55
        {/* Trigger and content components */}
56
      </Tooltip>
57
    </TooltipProvider>
58
  );
59
}
60

61
// Default open tooltip
62
function DefaultOpenTooltip() {
63
  return (
64
    <TooltipProvider>
65
      <Tooltip defaultOpen>
66
        {/* Tooltip starts open */}
67
      </Tooltip>
68
    </TooltipProvider>
69
  );
70
}
71

72
// Custom delay for specific tooltip
73
function CustomDelayTooltip() {
74
  return (
75
    <TooltipProvider delayDuration={700}>
76
      <Tooltip delayDuration={200}>
77
        {/* This tooltip opens faster than provider default */}
78
      </Tooltip>
79
    </TooltipProvider>
80
  );
81
}
82
```
83

84
### Tooltip Props
85

86
#### open
87

88
Controls the open state in controlled mode.
89

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

93
#### defaultOpen
94

95
Sets initial open state for uncontrolled tooltips.
96

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

101
#### onOpenChange
102

103
Callback triggered when tooltip open state changes.
104

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

108
#### delayDuration
109

110
Overrides provider delay duration for this tooltip instance.
111

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

115
#### disableHoverableContent
116

117
Overrides provider hover behavior for this tooltip instance.
118

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

122
### State Management
123

124
The Tooltip component provides two state management patterns:
125

126
**Uncontrolled (Internal State)**:
127
```typescript
128
<Tooltip defaultOpen={false}>
129
  {/* Tooltip manages its own state */}
130
</Tooltip>
131
```
132

133
**Controlled (External State)**:
134
```typescript
135
const [open, setOpen] = useState(false);
136
<Tooltip open={open} onOpenChange={setOpen}>
137
  {/* You control the state */}
138
</Tooltip>
139
```
140

141
### Tooltip Context
142

143
The Tooltip component creates context providing:
144

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

152
### Tooltip Aliases
153

154
```typescript { .api }
155
const Root: React.FC<TooltipProps>;
156
```
157

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

160
## Types
161

162
```typescript { .api }
163
type TooltipProps = {
164
  children?: React.ReactNode;
165
  open?: boolean;
166
  defaultOpen?: boolean;
167
  onOpenChange?: (open: boolean) => void;
168
  delayDuration?: number;
169
  disableHoverableContent?: boolean;
170
};
171
```