0
# Styling and Utilities
1

2
Utility functions and configuration options for managing tooltip styles, CSS injection, and visual customization.
3

4
## Capabilities
5

6
### Style Management
7

8
Utility function for removing injected tooltip styles. This function is deprecated in favor of the `disableStyleInjection` prop on the Tooltip component.
9

10
```typescript { .api }
11
/**
12
 * Remove injected tooltip styles (deprecated)
13
 * Use disableStyleInjection tooltip prop instead
14
 * @param options - Style removal configuration
15
 */
16
function removeStyle(options?: {
17
  type?: 'core' | 'base';
18
  id?: string;
19
}): void;
20
```
21

22
**Usage Example:**
23

24
```typescript
25
import { removeStyle } from "react-tooltip";
26

27
// Remove base styles
28
removeStyle({ type: 'base' });
29

30
// Remove core styles  
31
removeStyle({ type: 'core' });
32

33
// Remove styles with custom ID
34
removeStyle({ type: 'base', id: 'custom-tooltip-styles' });
35
```
36

37
## CSS Injection Control
38

39
### Automatic Style Injection
40

41
React Tooltip automatically injects required CSS styles. For versions 5.13.0+, this happens automatically. For earlier versions, you must manually import the CSS file.
42

43
```typescript
44
// Manual CSS import (required for versions < 5.13.0)
45
import 'react-tooltip/dist/react-tooltip.css';
46
```
47

48
### Disabling Style Injection
49

50
Control CSS injection using the `disableStyleInjection` prop on the Tooltip component.
51

52
```typescript { .api }
53
// Tooltip component prop for controlling style injection
54
interface ITooltipController {
55
  /** 
56
   * Disable CSS injection
57
   * - true: Disable both core and base styles
58
   * - false: Enable automatic injection (default)
59
   * - 'core': Disable only core styles, keep base styles
60
   */
61
  disableStyleInjection?: boolean | 'core';
62
}
63
```
64

65
**Usage Examples:**
66

67
```typescript
68
import { Tooltip } from "react-tooltip";
69

70
// Disable all automatic style injection
71
<Tooltip 
72
  id="no-styles" 
73
  disableStyleInjection={true}
74
/>
75

76
// Disable only core styles, keep base styles
77
<Tooltip 
78
  id="no-core-styles" 
79
  disableStyleInjection="core"
80
/>
81

82
// Default behavior - automatic injection
83
<Tooltip id="auto-styles" />
84
```
85

86
### Environment Variables
87

88
Control style injection globally using environment variables.
89

90
```bash
91
# Disable core styles globally
92
REACT_TOOLTIP_DISABLE_CORE_STYLES=true
93

94
# Disable base styles globally  
95
REACT_TOOLTIP_DISABLE_BASE_STYLES=true
96
```
97

98
## Custom Styling
99

100
### Inline Styles
101

102
Apply custom styles directly to tooltip components using standard React style props.
103

104
```typescript { .api }
105
interface ITooltipController {
106
  /** Inline CSS styles for the tooltip */
107
  style?: CSSProperties;
108
  /** Border styling (width > 3px may affect arrow positioning) */
109
  border?: CSSProperties['border'];
110
  /** Tooltip opacity */
111
  opacity?: CSSProperties['opacity'];
112
  /** Arrow background color */
113
  arrowColor?: CSSProperties['backgroundColor'];
114
  /** Arrow size in pixels */
115
  arrowSize?: number;
116
}
117
```
118

119
**Usage Examples:**
120

121
```typescript
122
import { Tooltip } from "react-tooltip";
123

124
// Custom inline styles
125
<Tooltip 
126
  id="styled-tooltip"
127
  style={{
128
    backgroundColor: '#333',
129
    color: '#fff',
130
    fontSize: '14px',
131
    padding: '8px 12px',
132
    borderRadius: '4px'
133
  }}
134
  border="2px solid #555"
135
  opacity={0.95}
136
  arrowColor="#333"
137
  arrowSize={8}
138
/>
139
```
140

141
### CSS Classes
142

143
Apply custom CSS classes for advanced styling.
144

145
```typescript { .api }
146
interface ITooltipController {
147
  /** CSS class name for the tooltip container */
148
  className?: string;
149
  /** CSS class name for the tooltip arrow */
150
  classNameArrow?: string;
151
}
152
```
153

154
**Usage Examples:**
155

156
```typescript
157
// Custom CSS classes
158
<Tooltip 
159
  id="custom-classes"
160
  className="my-custom-tooltip"
161
  classNameArrow="my-custom-arrow"
162
/>
163

164
// Via data attributes
165
<button
166
  data-tooltip-id="data-classes"
167
  data-tooltip-content="Styled tooltip"
168
  data-tooltip-class-name="my-data-tooltip"
169
>
170
  Styled button
171
</button>
172
```
173

174
```css
175
/* Custom CSS styles */
176
.my-custom-tooltip {
177
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
178
  color: white;
179
  font-weight: bold;
180
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
181
}
182

183
.my-custom-arrow {
184
  color: #ff6b6b;
185
}
186

187
.my-data-tooltip {
188
  border: 2px dashed #333;
189
  background: #f0f0f0;
190
  color: #333;
191
}
192
```
193

194
## Visual Variants
195

196
Built-in visual themes for consistent styling across different tooltip types.
197

198
```typescript { .api }
199
type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info';
200
```
201

202
**Usage Examples:**
203

204
```typescript
205
// Different visual variants
206
<Tooltip id="dark-tooltip" variant="dark" />
207
<Tooltip id="success-tooltip" variant="success" />
208
<Tooltip id="warning-tooltip" variant="warning" />
209
<Tooltip id="error-tooltip" variant="error" />
210
<Tooltip id="info-tooltip" variant="info" />
211
<Tooltip id="light-tooltip" variant="light" />
212
```
213

214
## CSS File Exports
215

216
Available CSS files for manual import and customization:
217

218
- `react-tooltip/dist/react-tooltip.css` - Complete stylesheet with all styles
219
- `react-tooltip/dist/react-tooltip.min.css` - Minified complete stylesheet
220

221
**Package Exports:**
222

223
```json
224
{
225
  "exports": {
226
    "./dist/react-tooltip.css": "./dist/react-tooltip.min.css"
227
  }
228
}
229
```
230

231
## Style Injection Implementation
232

233
### Internal Style Management
234

235
The library uses internal functions for CSS injection that are not part of the public API but provide context for understanding style behavior.
236

237
```typescript { .api }
238
// Internal constants (not exported from main package)
239
const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles';
240
const REACT_TOOLTIP_BASE_STYLES_ID = 'react-tooltip-base-styles';
241

242
/**
243
 * Internal style injection function (not exported from main package)
244
 * Used internally for CSS injection. For custom styling needs, use the
245
 * disableStyleInjection prop and provide your own CSS instead.
246
 */
247
function injectStyle(options: {
248
  css: string;
249
  id?: string;
250
  type?: 'core' | 'base';
251
  ref?: any;
252
}): void;
253
```
254

255
### Custom Event Integration
256

257
The library dispatches custom events for style injection that can be intercepted for advanced use cases.
258

259
```typescript
260
window.addEventListener('react-tooltip-inject-styles', (event) => {
261
  // Custom event payload
262
  const { disableCore, disableBase } = event.detail;
263
  // Handle custom style injection logic
264
});
265
```
266

267
## Migration from removeStyle
268

269
### Old Approach (Deprecated)
270

271
```typescript
272
import { removeStyle } from "react-tooltip";
273

274
// Remove styles programmatically
275
useEffect(() => {
276
  removeStyle({ type: 'base' });
277
}, []);
278
```
279

280
### New Approach (Recommended)
281

282
```typescript
283
import { Tooltip } from "react-tooltip";
284

285
// Disable injection via component prop
286
<Tooltip 
287
  id="no-injection"
288
  disableStyleInjection={true}
289
/>
290
```
291

292
## Advanced Styling Patterns
293

294
### Conditional Styling
295

296
```typescript
297
function ConditionalTooltip({ theme }: { theme: 'light' | 'dark' }) {
298
  return (
299
    <Tooltip
300
      id="conditional"
301
      variant={theme}
302
      style={{
303
        ...(theme === 'dark' && { 
304
          backgroundColor: '#1a1a1a',
305
          border: '1px solid #333'
306
        }),
307
        ...(theme === 'light' && {
308
          backgroundColor: '#ffffff',
309
          border: '1px solid #ccc',
310
          color: '#333'
311
        })
312
      }}
313
    />
314
  );
315
}
316
```
317

318
### Responsive Styling
319

320
```typescript
321
function ResponsiveTooltip() {
322
  const [isMobile, setIsMobile] = useState(false);
323
  
324
  useEffect(() => {
325
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
326
    checkMobile();
327
    window.addEventListener('resize', checkMobile);
328
    return () => window.removeEventListener('resize', checkMobile);
329
  }, []);
330
  
331
  return (
332
    <Tooltip
333
      id="responsive"
334
      style={{
335
        fontSize: isMobile ? '12px' : '14px',
336
        padding: isMobile ? '6px 8px' : '8px 12px'
337
      }}
338
      arrowSize={isMobile ? 6 : 8}
339
    />
340
  );
341
}
342
```