0
# Legacy Components
1

2
Provider and wrapper components for backward compatibility with earlier versions of react-tooltip. These components are deprecated in favor of the main Tooltip component with data attributes but are maintained for legacy support.
3

4
## Capabilities
5

6
### TooltipProvider
7

8
Context provider component for managing tooltip state across multiple tooltip instances. Used primarily for legacy applications that require shared tooltip state.
9

10
```typescript { .api }
11
/**
12
 * Context provider for tooltip management (legacy)
13
 * @param props - Provider configuration
14
 * @returns React context provider component
15
 */
16
function TooltipProvider(props: { children: React.ReactNode }): React.ReactElement;
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import { TooltipProvider, TooltipWrapper, Tooltip } from "react-tooltip";
23

24
function App() {
25
  return (
26
    <TooltipProvider>
27
      <div>
28
        <TooltipWrapper tooltipId="legacy-tooltip" content="Legacy content">
29
          <button>Legacy Button</button>
30
        </TooltipWrapper>
31
        <Tooltip id="legacy-tooltip" />
32
      </div>
33
    </TooltipProvider>
34
  );
35
}
36
```
37

38
### TooltipWrapper (Deprecated)
39

40
Wrapper component that provides tooltip functionality to child elements using the legacy context-based approach.
41

42
```typescript { .api }
43
/**
44
 * Wrapper component for legacy tooltip implementation (deprecated)
45
 * Use data attributes with main Tooltip component instead
46
 * @param props - Wrapper configuration
47
 * @returns React wrapper component
48
 */
49
function TooltipWrapper(props: ITooltipWrapper): React.ReactElement;
50

51
interface ITooltipWrapper {
52
  /** ID of associated tooltip */
53
  tooltipId?: string;
54
  /** Child elements to wrap */
55
  children: ReactNode;
56
  /** CSS class name */
57
  className?: string;
58
  /** Tooltip placement position */
59
  place?: PlacesType;
60
  /** Text content for tooltip */
61
  content?: string;
62
  /** HTML content (deprecated) */
63
  html?: string;
64
  /** Visual theme variant */
65
  variant?: VariantType;
66
  /** Distance from anchor element */
67
  offset?: number;
68
  /** HTML wrapper element type */
69
  wrapper?: WrapperType;
70
  /** Event types to trigger tooltip (deprecated) */
71
  events?: EventsType[];
72
  /** Positioning strategy */
73
  positionStrategy?: PositionStrategy;
74
  /** Delay before showing tooltip */
75
  delayShow?: number;
76
  /** Delay before hiding tooltip */
77
  delayHide?: number;
78
}
79
```
80

81
**Usage Example:**
82

83
```typescript
84
import { TooltipProvider, TooltipWrapper, Tooltip } from "react-tooltip";
85

86
// Legacy wrapper approach (deprecated)
87
function LegacyExample() {
88
  return (
89
    <TooltipProvider>
90
      <div>
91
        <TooltipWrapper
92
          tooltipId="legacy-wrapper"
93
          content="This is legacy content"
94
          place="top"
95
          variant="dark"
96
        >
97
          <button>Legacy Wrapped Button</button>
98
        </TooltipWrapper>
99
        
100
        <Tooltip id="legacy-wrapper" />
101
      </div>
102
    </TooltipProvider>
103
  );
104
}
105

106
// Modern approach (recommended)
107
function ModernExample() {
108
  return (
109
    <div>
110
      <button 
111
        data-tooltip-id="modern-tooltip"
112
        data-tooltip-content="This is modern content"
113
        data-tooltip-place="top"
114
        data-tooltip-variant="dark"
115
      >
116
        Modern Button
117
      </button>
118
      
119
      <Tooltip id="modern-tooltip" />
120
    </div>
121
  );
122
}
123
```
124

125
### useTooltip Hook
126

127
Hook for accessing tooltip context data. Used internally by legacy components and available for custom implementations requiring tooltip context. **Note**: This hook is not exported from the main package entry point.
128

129
```typescript { .api }
130
/**
131
 * Hook for accessing tooltip context (primarily for internal use)
132
 * Import from: 'react-tooltip/dist/react-tooltip.min.cjs' or similar internal path
133
 * @returns Tooltip context data
134
 */
135
function useTooltip(): TooltipContextDataWrapper;
136

137
interface TooltipContextDataWrapper {
138
  getTooltipData: (tooltipId?: string) => TooltipContextData;
139
}
140

141
interface TooltipContextData {
142
  anchorRefs: Set<AnchorRef>;
143
  activeAnchor: AnchorRef;
144
  attach: (...refs: AnchorRef[]) => void;
145
  detach: (...refs: AnchorRef[]) => void;
146
  setActiveAnchor: (ref: AnchorRef) => void;
147
}
148

149
interface AnchorRef {
150
  current: HTMLElement | null;
151
}
152
```
153

154
**Usage Example:**
155

156
```typescript
157
// useTooltip requires direct import from internal path, not main package export
158
// This example is for illustration of the internal API structure
159

160
function CustomTooltipComponent() {
161
  const { getTooltipData } = useTooltip();
162
  const tooltipData = getTooltipData("my-tooltip");
163
  
164
  // Custom logic using tooltip context
165
  const handleAttach = () => {
166
    const ref = { current: document.getElementById('my-element') };
167
    tooltipData.attach(ref);
168
  };
169
  
170
  return (
171
    <div>
172
      <button onClick={handleAttach}>Attach Tooltip</button>
173
      {/* Custom tooltip implementation */}
174
    </div>
175
  );
176
}
177
```
178

179
## Migration Guide
180

181
### From TooltipWrapper to Data Attributes
182

183
```typescript
184
// Old approach (TooltipWrapper)
185
<TooltipProvider>
186
  <TooltipWrapper
187
    tooltipId="example"
188
    content="Tooltip content"
189
    place="top"
190
    variant="success"
191
  >
192
    <button>Click me</button>
193
  </TooltipWrapper>
194
  <Tooltip id="example" />
195
</TooltipProvider>
196

197
// New approach (Data Attributes)
198
<div>
199
  <button
200
    data-tooltip-id="example"
201
    data-tooltip-content="Tooltip content"
202
    data-tooltip-place="top"
203
    data-tooltip-variant="success"
204
  >
205
    Click me
206
  </button>
207
  <Tooltip id="example" />
208
</div>
209
```
210

211
### Benefits of Modern Approach
212

213
- **Simpler markup**: No wrapper components needed
214
- **Better performance**: No context providers required
215
- **Cleaner HTML**: Direct data attributes on elements
216
- **Easier debugging**: Clear relationship between elements and tooltips
217
- **Future-proof**: Aligns with modern React patterns
218

219
## Legacy Support Types
220

221
```typescript { .api }
222
type AnchorRef = RefObject<HTMLElement>;
223

224
interface TooltipContextData {
225
  anchorRefs: Set<AnchorRef>;
226
  activeAnchor: AnchorRef;
227
  attach: (...refs: AnchorRef[]) => void;
228
  detach: (...refs: AnchorRef[]) => void;
229
  setActiveAnchor: (ref: AnchorRef) => void;
230
}
231
```