0
# React Tooltip
1

2
React Tooltip is a modern, accessible tooltip component library for React applications that provides comprehensive tooltip functionality with customizable positioning, styling, and behavior. Built with TypeScript and powered by Floating UI for advanced positioning algorithms, it offers automatic placement adjustment to avoid viewport edges, supports multiple trigger events (hover, click, focus), and includes accessibility features like ARIA attributes and keyboard navigation.
3

4
## Package Information
5

6
- **Package Name**: react-tooltip
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-tooltip`
10

11
## Core Imports
12

13
```typescript
14
import { Tooltip } from "react-tooltip";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { Tooltip } = require("react-tooltip");
21
```
22

23
Additional imports for advanced usage:
24

25
```typescript
26
import { 
27
  Tooltip, 
28
  TooltipProvider, 
29
  TooltipWrapper, 
30
  removeStyle,
31
  type ITooltip,
32
  type PlacesType,
33
  type VariantType
34
} from "react-tooltip";
35
```
36

37
## Basic Usage
38

39
```typescript
40
import { Tooltip } from "react-tooltip";
41

42
function App() {
43
  return (
44
    <div>
45
      {/* Element with tooltip */}
46
      <button 
47
        data-tooltip-id="my-tooltip" 
48
        data-tooltip-content="Hello world!"
49
      >
50
        Hover me
51
      </button>
52
      
53
      {/* Tooltip component */}
54
      <Tooltip id="my-tooltip" />
55
    </div>
56
  );
57
}
58
```
59

60
For versions before 5.13.0, you must import the CSS file:
61

62
```typescript
63
import 'react-tooltip/dist/react-tooltip.css'
64
```
65

66
## Architecture
67

68
React Tooltip is built around several key components:
69

70
- **Main Tooltip Component**: Core `Tooltip` component providing full tooltip functionality
71
- **Data Attributes System**: HTML data attributes for declarative tooltip configuration
72
- **Positioning Engine**: Floating UI integration for advanced positioning with collision detection
73
- **Event System**: Flexible event handling for hover, click, focus, and custom events
74
- **Style Injection**: Automatic CSS injection with customization options
75
- **Legacy Components**: TooltipProvider and TooltipWrapper for backward compatibility
76

77
## Capabilities
78

79
### Main Tooltip Component
80

81
Primary tooltip component with comprehensive configuration options, imperative API, and accessibility features. Supports declarative usage via data attributes and programmatic control via ref methods.
82

83
```typescript { .api }
84
function Tooltip(props: ITooltipController): React.ReactElement;
85
```
86

87
[Main Tooltip Component](./tooltip-component.md)
88

89
### Legacy Components
90

91
Provider and wrapper components for backward compatibility with earlier versions. These components are deprecated in favor of the main Tooltip component and data attributes.
92

93
```typescript { .api }
94
function TooltipProvider(props: { children: React.ReactNode }): React.ReactElement;
95
function TooltipWrapper(props: ITooltipWrapper): React.ReactElement;
96
```
97

98
[Legacy Components](./legacy-components.md)
99

100
### Styling and Utilities
101

102
Utility functions for managing tooltip styles and CSS injection. Includes functions for removing injected styles and configuring style behavior.
103

104
```typescript { .api }
105
function removeStyle(options?: { type?: 'core' | 'base'; id?: string }): void;
106
```
107

108
[Styling and Utilities](./styling-utilities.md)
109

110
## Core Types
111

112
```typescript { .api }
113
type PlacesType = 
114
  | 'top' | 'top-start' | 'top-end'
115
  | 'right' | 'right-start' | 'right-end' 
116
  | 'bottom' | 'bottom-start' | 'bottom-end'
117
  | 'left' | 'left-start' | 'left-end';
118

119
type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info';
120

121
type PositionStrategy = 'absolute' | 'fixed';
122

123
type EventsType = 'hover' | 'click';
124

125
interface IPosition {
126
  x: number;
127
  y: number;
128
}
129

130
interface TooltipRefProps {
131
  open: (options?: TooltipImperativeOpenOptions) => void;
132
  close: (options?: TooltipImperativeCloseOptions) => void;
133
  readonly activeAnchor: HTMLElement | null;
134
  readonly place: PlacesType;
135
  readonly isOpen: boolean;
136
}
137

138
interface TooltipImperativeOpenOptions {
139
  anchorSelect?: string;
140
  position?: IPosition;
141
  place?: PlacesType;
142
  content?: ChildrenType;
143
  delay?: number;
144
}
145

146
interface TooltipImperativeCloseOptions {
147
  delay?: number;
148
}
149
```