0
# Global Utilities
1

2
Global utility functions and properties for managing multiple tooltips and accessing framework-level functionality.
3

4
## Capabilities
5

6
### Hide All Tooltips
7

8
Utility function to hide all currently visible tooltip instances with optional exclusions and duration override.
9

10
```typescript { .api }
11
/**
12
 * Hide all visible tooltip instances
13
 * @param options - Optional configuration for hiding behavior
14
 */
15
function hideAll(options?: HideAllOptions): void;
16

17
interface HideAllOptions {
18
  /** Override duration for hiding animation */
19
  duration?: number;
20
  /** Exclude specific instance or reference element from hiding */
21
  exclude?: Instance | ReferenceElement;
22
}
23
```
24

25
**Usage Examples:**
26

27
```typescript
28
import { hideAll } from "tippy.js";
29

30
// Hide all visible tooltips
31
hideAll();
32

33
// Hide all with custom duration
34
hideAll({ duration: 100 });
35

36
// Hide all except specific instance
37
const importantTooltip = tippy('#important', { content: 'Keep me visible' });
38
hideAll({ exclude: importantTooltip });
39

40
// Hide all except tooltips on specific element
41
const keepVisible = document.querySelector('#keep-visible');
42
hideAll({ exclude: keepVisible });
43

44
// Use in combination with other events
45
document.addEventListener('scroll', () => {
46
  hideAll({ duration: 0 }); // Hide immediately on scroll
47
});
48
```
49

50
### Default Properties Management
51

52
Global default properties that apply to all new tooltip instances, with utilities for reading and updating them.
53

54
```typescript { .api }
55
interface TippyStatics {
56
  /** Current input state tracking */
57
  readonly currentInput: { isTouch: boolean };
58
  /** Current global default properties */
59
  readonly defaultProps: DefaultProps;
60
  /** Update global default properties */
61
  setDefaultProps(partialProps: Partial<DefaultProps>): void;
62
}
63

64
interface DefaultProps extends Omit<Props, 'delay' | 'duration'> {
65
  delay: number | [number, number];
66
  duration: number | [number, number];
67
}
68
```
69

70
**Usage Examples:**
71

72
```typescript
73
import tippy from "tippy.js";
74

75
// Check current defaults
76
console.log(tippy.defaultProps.placement); // 'top'
77
console.log(tippy.defaultProps.theme); // ''
78

79
// Update global defaults (affects all new instances)
80
tippy.setDefaultProps({
81
  delay: [500, 100], // [show delay, hide delay]
82
  duration: [200, 150], // [show duration, hide duration]
83
  placement: 'bottom',
84
  theme: 'dark',
85
  arrow: false
86
});
87

88
// Create instance with updated defaults
89
const instance = tippy('#button', { content: 'Uses new defaults' });
90

91
// Override specific defaults for an instance
92
const customInstance = tippy('#special', {
93
  content: 'Custom tooltip',
94
  placement: 'top', // Override the global 'bottom' default
95
  theme: 'light' // Override the global 'dark' default
96
});
97
```
98

99
### Input State Tracking
100

101
Global state tracking for current input method (mouse vs touch) to enable adaptive behavior.
102

103
```typescript { .api }
104
interface CurrentInput {
105
  /** Whether the current input method is touch-based */
106
  readonly isTouch: boolean;
107
}
108

109
// Accessed via tippy.currentInput
110
const currentInput: CurrentInput;
111
```
112

113
**Usage Examples:**
114

115
```typescript
116
import tippy from "tippy.js";
117

118
// Adaptive behavior based on input type
119
tippy('.adaptive-tooltip', {
120
  content: 'Adaptive tooltip',
121
  trigger: tippy.currentInput.isTouch ? 'click' : 'mouseenter focus',
122
  delay: tippy.currentInput.isTouch ? 0 : 500,
123
  touch: tippy.currentInput.isTouch ? true : ['hold', 500]
124
});
125

126
// Dynamic configuration based on input
127
function createResponsiveTooltip(element, content) {
128
  return tippy(element, {
129
    content,
130
    interactive: !tippy.currentInput.isTouch, // Non-interactive on touch
131
    interactiveBorder: tippy.currentInput.isTouch ? 0 : 20,
132
    hideOnClick: tippy.currentInput.isTouch ? true : 'toggle'
133
  });
134
}
135

136
// React to input changes
137
document.addEventListener('touchstart', () => {
138
  if (tippy.currentInput.isTouch) {
139
    // Touch mode activated - update existing tooltips
140
    hideAll(); // Hide mouse-activated tooltips
141
  }
142
});
143
```
144

145
### Constants
146

147
Pre-defined constants for common use cases and styling.
148

149
```typescript { .api }
150
/** Pre-defined SVG arrow with rounded corners */
151
const roundArrow: string;
152
```
153

154
**Usage Examples:**
155

156
```typescript
157
import tippy, { roundArrow } from "tippy.js";
158

159
// Use rounded arrow
160
tippy('#rounded-arrow', {
161
  content: 'Tooltip with rounded arrow',
162
  arrow: roundArrow
163
});
164

165
// Custom arrow with roundArrow as base
166
tippy('#custom-arrow', {
167
  content: 'Custom styled arrow',
168
  arrow: roundArrow,
169
  theme: 'custom-arrow-theme' // Define in CSS
170
});
171
```
172

173
### Utility Functions
174

175
Additional utility functions for advanced tooltip management.
176

177
```typescript { .api }
178
// Get all mounted instances
179
const mountedInstances: Instance[];
180

181
// Type guards for element checking
182
function isElement(value: any): value is Element;
183
function isReferenceElement(value: any): value is ReferenceElement;
184
```
185

186
**Usage Examples:**
187

188
```typescript
189
import tippy from "tippy.js";
190

191
// Access all mounted instances (internal usage)
192
// Note: This is internal API, use with caution
193
const allInstances = tippy.mountedInstances;
194

195
// Bulk operations on all instances
196
function updateAllTooltips(newTheme) {
197
  allInstances.forEach(instance => {
198
    instance.setProps({ theme: newTheme });
199
  });
200
}
201

202
// Count visible tooltips
203
function countVisibleTooltips() {
204
  return allInstances.filter(instance => instance.state.isVisible).length;
205
}
206

207
// Find instance by reference element
208
function findTooltipForElement(element) {
209
  return allInstances.find(instance => instance.reference === element);
210
}
211
```