0
# Provider Configuration
1

2
The `TooltipProvider` component manages global tooltip behavior and timing across all tooltips in your application. It provides context for delay timing, hover behavior, and skip delay functionality.
3

4
## Capabilities
5

6
### TooltipProvider Component
7

8
Global context provider that wraps your application or section containing tooltips.
9

10
```typescript { .api }
11
/**
12
 * Provider component for managing global tooltip behavior and timing
13
 * @param children - Child components containing tooltips
14
 * @param delayDuration - Duration in ms from pointer enter until tooltip opens (default: 700)
15
 * @param skipDelayDuration - Duration in ms user has to enter another trigger without delay (default: 300)
16
 * @param disableHoverableContent - When true, hovering content closes tooltip (default: false)
17
 */
18
interface TooltipProviderProps {
19
  children: React.ReactNode;
20
  delayDuration?: number;
21
  skipDelayDuration?: number;
22
  disableHoverableContent?: boolean;
23
}
24

25
const TooltipProvider: React.FC<TooltipProviderProps>;
26
```
27

28
**Usage Examples:**
29

30
```typescript
31
import { TooltipProvider } from "@radix-ui/react-tooltip";
32

33
// Basic provider with default settings
34
function App() {
35
  return (
36
    <TooltipProvider>
37
      {/* Your tooltip components */}
38
    </TooltipProvider>
39
  );
40
}
41

42
// Custom delay timing
43
function CustomApp() {
44
  return (
45
    <TooltipProvider
46
      delayDuration={500}
47
      skipDelayDuration={200}
48
      disableHoverableContent={false}
49
    >
50
      {/* Your tooltip components */}
51
    </TooltipProvider>
52
  );
53
}
54

55
// Disable hoverable content globally
56
function SimpleTooltips() {
57
  return (
58
    <TooltipProvider disableHoverableContent>
59
      {/* Tooltips will close when pointer leaves trigger */}
60
    </TooltipProvider>
61
  );
62
}
63
```
64

65
### Provider Props
66

67
#### delayDuration
68

69
Controls the delay before tooltip opens when pointer enters trigger.
70

71
- **Type**: `number`
72
- **Default**: `700` (milliseconds)
73
- **Description**: Duration from pointer enter until tooltip opens
74

75
#### skipDelayDuration
76

77
Controls how long user has to enter another trigger without delay.
78

79
- **Type**: `number`
80
- **Default**: `300` (milliseconds)
81
- **Description**: Time window for entering another tooltip trigger without incurring delay again
82

83
#### disableHoverableContent
84

85
Controls whether tooltip content can be hovered.
86

87
- **Type**: `boolean`
88
- **Default**: `false`
89
- **Description**: When `true`, trying to hover content closes tooltip as pointer leaves trigger
90

91
### Provider Context
92

93
The provider creates a context that manages:
94

95
- **Delay state tracking**: Whether subsequent tooltips should have delays
96
- **Transit state**: Whether pointer is in transit between trigger and content
97
- **Global configuration**: Default settings inherited by all child tooltips
98
- **Event coordination**: Opening one tooltip closes others
99

100
### Provider Aliases
101

102
```typescript { .api }
103
const Provider: React.FC<TooltipProviderProps>;
104
```
105

106
The `Provider` component is an alias for `TooltipProvider` for shorter import names.
107

108
## Types
109

110
```typescript { .api }
111
type TooltipProviderProps = {
112
  children: React.ReactNode;
113
  delayDuration?: number;
114
  skipDelayDuration?: number;
115
  disableHoverableContent?: boolean;
116
};
117
```