@xsolla/xui-tooltip 0.99.0 → 0.101.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +275 -17
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,36 +1,294 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Tooltip
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A cross-platform React tooltip component that displays contextual information when a user hovers over or focuses on an element. Supports multiple placements and animations.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
+
npm install @xsolla/xui-tooltip
|
|
9
|
+
# or
|
|
8
10
|
yarn add @xsolla/xui-tooltip
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
##
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Basic Tooltip
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { Tooltip } from '@xsolla/xui-tooltip';
|
|
20
|
+
import { Button } from '@xsolla/xui-button';
|
|
21
|
+
|
|
22
|
+
export default function BasicTooltip() {
|
|
23
|
+
return (
|
|
24
|
+
<Tooltip content="This is a helpful tip">
|
|
25
|
+
<Button>Hover me</Button>
|
|
26
|
+
</Tooltip>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Tooltip Placements
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import * as React from 'react';
|
|
35
|
+
import { Tooltip } from '@xsolla/xui-tooltip';
|
|
36
|
+
import { Button } from '@xsolla/xui-button';
|
|
37
|
+
|
|
38
|
+
export default function TooltipPlacements() {
|
|
39
|
+
return (
|
|
40
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, padding: 48 }}>
|
|
41
|
+
<Tooltip content="Top left" placement="top-left">
|
|
42
|
+
<Button variant="secondary">Top Left</Button>
|
|
43
|
+
</Tooltip>
|
|
44
|
+
<Tooltip content="Top center" placement="top">
|
|
45
|
+
<Button variant="secondary">Top</Button>
|
|
46
|
+
</Tooltip>
|
|
47
|
+
<Tooltip content="Top right" placement="top-right">
|
|
48
|
+
<Button variant="secondary">Top Right</Button>
|
|
49
|
+
</Tooltip>
|
|
50
|
+
|
|
51
|
+
<Tooltip content="Left side" placement="left">
|
|
52
|
+
<Button variant="secondary">Left</Button>
|
|
53
|
+
</Tooltip>
|
|
54
|
+
<div />
|
|
55
|
+
<Tooltip content="Right side" placement="right">
|
|
56
|
+
<Button variant="secondary">Right</Button>
|
|
57
|
+
</Tooltip>
|
|
58
|
+
|
|
59
|
+
<Tooltip content="Bottom left" placement="bottom-left">
|
|
60
|
+
<Button variant="secondary">Bottom Left</Button>
|
|
61
|
+
</Tooltip>
|
|
62
|
+
<Tooltip content="Bottom center" placement="bottom">
|
|
63
|
+
<Button variant="secondary">Bottom</Button>
|
|
64
|
+
</Tooltip>
|
|
65
|
+
<Tooltip content="Bottom right" placement="bottom-right">
|
|
66
|
+
<Button variant="secondary">Bottom Right</Button>
|
|
67
|
+
</Tooltip>
|
|
68
|
+
</div>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Tooltip Sizes
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import * as React from 'react';
|
|
77
|
+
import { Tooltip } from '@xsolla/xui-tooltip';
|
|
78
|
+
import { Button } from '@xsolla/xui-button';
|
|
79
|
+
|
|
80
|
+
export default function TooltipSizes() {
|
|
81
|
+
return (
|
|
82
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
83
|
+
<Tooltip content="Small tooltip" size="sm">
|
|
84
|
+
<Button variant="secondary">Small</Button>
|
|
85
|
+
</Tooltip>
|
|
86
|
+
<Tooltip content="Medium tooltip" size="md">
|
|
87
|
+
<Button variant="secondary">Medium</Button>
|
|
88
|
+
</Tooltip>
|
|
89
|
+
<Tooltip content="Large tooltip" size="lg">
|
|
90
|
+
<Button variant="secondary">Large</Button>
|
|
91
|
+
</Tooltip>
|
|
92
|
+
<Tooltip content="Extra large tooltip" size="xl">
|
|
93
|
+
<Button variant="secondary">XL</Button>
|
|
94
|
+
</Tooltip>
|
|
95
|
+
</div>
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Tooltip with Delay
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
import * as React from 'react';
|
|
104
|
+
import { Tooltip } from '@xsolla/xui-tooltip';
|
|
105
|
+
import { Button } from '@xsolla/xui-button';
|
|
106
|
+
|
|
107
|
+
export default function TooltipWithDelay() {
|
|
108
|
+
return (
|
|
109
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
110
|
+
<Tooltip content="Appears immediately" delayEnter={0}>
|
|
111
|
+
<Button variant="secondary">No Delay</Button>
|
|
112
|
+
</Tooltip>
|
|
113
|
+
<Tooltip content="Appears after 500ms" delayEnter={500}>
|
|
114
|
+
<Button variant="secondary">500ms Delay</Button>
|
|
115
|
+
</Tooltip>
|
|
116
|
+
<Tooltip content="Stays visible for 500ms" delayLeave={500}>
|
|
117
|
+
<Button variant="secondary">Slow Hide</Button>
|
|
118
|
+
</Tooltip>
|
|
119
|
+
</div>
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## Anatomy
|
|
125
|
+
|
|
126
|
+
Import the component and wrap your trigger element:
|
|
127
|
+
|
|
128
|
+
```jsx
|
|
129
|
+
import { Tooltip } from '@xsolla/xui-tooltip';
|
|
130
|
+
|
|
131
|
+
<Tooltip
|
|
132
|
+
content="Tooltip text" // Content to display
|
|
133
|
+
placement="top" // Position relative to trigger
|
|
134
|
+
size="md" // Size variant
|
|
135
|
+
offset={12} // Distance from trigger
|
|
136
|
+
delayEnter={0} // Delay before showing
|
|
137
|
+
delayLeave={0} // Delay before hiding
|
|
138
|
+
>
|
|
139
|
+
<TriggerElement />
|
|
140
|
+
</Tooltip>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## Examples
|
|
144
|
+
|
|
145
|
+
### Rich Content Tooltip
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
import * as React from 'react';
|
|
149
|
+
import { Tooltip } from '@xsolla/xui-tooltip';
|
|
150
|
+
import { Avatar } from '@xsolla/xui-avatar';
|
|
151
|
+
|
|
152
|
+
export default function RichContentTooltip() {
|
|
153
|
+
return (
|
|
154
|
+
<Tooltip
|
|
155
|
+
content={
|
|
156
|
+
<div style={{ textAlign: 'center' }}>
|
|
157
|
+
<strong>John Doe</strong>
|
|
158
|
+
<br />
|
|
159
|
+
<span style={{ opacity: 0.7 }}>Senior Developer</span>
|
|
160
|
+
</div>
|
|
161
|
+
}
|
|
162
|
+
>
|
|
163
|
+
<Avatar text="JD" />
|
|
164
|
+
</Tooltip>
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### Icon with Tooltip
|
|
12
170
|
|
|
13
171
|
```tsx
|
|
172
|
+
import * as React from 'react';
|
|
173
|
+
import { Tooltip } from '@xsolla/xui-tooltip';
|
|
174
|
+
import { Edit, TrashCan, MoreHorizontal } from '@xsolla/xui-icons-base';
|
|
175
|
+
|
|
176
|
+
export default function IconTooltip() {
|
|
177
|
+
return (
|
|
178
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
179
|
+
<Tooltip content="Edit item">
|
|
180
|
+
<Edit style={{ cursor: 'pointer' }} />
|
|
181
|
+
</Tooltip>
|
|
182
|
+
<Tooltip content="Delete item">
|
|
183
|
+
<TrashCan style={{ cursor: 'pointer' }} />
|
|
184
|
+
</Tooltip>
|
|
185
|
+
<Tooltip content="More options">
|
|
186
|
+
<MoreHorizontal style={{ cursor: 'pointer' }} />
|
|
187
|
+
</Tooltip>
|
|
188
|
+
</div>
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### Controlled Tooltip
|
|
194
|
+
|
|
195
|
+
```tsx
|
|
196
|
+
import * as React from 'react';
|
|
14
197
|
import { Tooltip } from '@xsolla/xui-tooltip';
|
|
15
198
|
import { Button } from '@xsolla/xui-button';
|
|
16
199
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
200
|
+
export default function ControlledTooltip() {
|
|
201
|
+
const [visible, setVisible] = React.useState(false);
|
|
202
|
+
|
|
203
|
+
return (
|
|
204
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
205
|
+
<Tooltip content="I'm controlled!" controlledVisible={visible}>
|
|
206
|
+
<Button variant="secondary">Target</Button>
|
|
207
|
+
</Tooltip>
|
|
208
|
+
<Button onPress={() => setVisible(!visible)}>
|
|
209
|
+
{visible ? 'Hide' : 'Show'} Tooltip
|
|
210
|
+
</Button>
|
|
211
|
+
</div>
|
|
212
|
+
);
|
|
213
|
+
}
|
|
22
214
|
```
|
|
23
215
|
|
|
24
|
-
|
|
216
|
+
### Disabled Button with Tooltip
|
|
217
|
+
|
|
218
|
+
```tsx
|
|
219
|
+
import * as React from 'react';
|
|
220
|
+
import { Tooltip } from '@xsolla/xui-tooltip';
|
|
221
|
+
import { Button } from '@xsolla/xui-button';
|
|
222
|
+
|
|
223
|
+
export default function DisabledButtonTooltip() {
|
|
224
|
+
return (
|
|
225
|
+
<Tooltip content="You need to complete the form first">
|
|
226
|
+
<span> {/* Wrapper needed for disabled elements */}
|
|
227
|
+
<Button disabled>Submit</Button>
|
|
228
|
+
</span>
|
|
229
|
+
</Tooltip>
|
|
230
|
+
);
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
## API Reference
|
|
25
235
|
|
|
26
236
|
### Tooltip
|
|
27
237
|
|
|
238
|
+
A tooltip component that shows on hover/focus.
|
|
239
|
+
|
|
240
|
+
**Tooltip Props:**
|
|
241
|
+
|
|
28
242
|
| Prop | Type | Default | Description |
|
|
29
|
-
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
243
|
+
| :--- | :--- | :------ | :---------- |
|
|
244
|
+
| content | `ReactNode` | - | **Required.** Tooltip content. |
|
|
245
|
+
| children | `ReactNode` | - | **Required.** Trigger element. |
|
|
246
|
+
| size | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the tooltip. |
|
|
247
|
+
| placement | `TooltipPlacement` | `"top"` | Position relative to trigger. |
|
|
248
|
+
| offset | `number` | `12` | Distance from trigger in pixels. |
|
|
249
|
+
| delayEnter | `number` | - | Delay before showing (ms). |
|
|
250
|
+
| delayLeave | `number` | - | Delay before hiding (ms). |
|
|
251
|
+
| controlledVisible | `boolean` | - | Control visibility externally. |
|
|
252
|
+
| style | `CSSProperties` | - | Custom styles. |
|
|
253
|
+
| className | `string` | - | Custom class name. |
|
|
254
|
+
| data-testid | `string` | - | Test identifier. |
|
|
255
|
+
|
|
256
|
+
**TooltipPlacement Options:**
|
|
257
|
+
|
|
258
|
+
| Placement | Description |
|
|
259
|
+
| :-------- | :---------- |
|
|
260
|
+
| `top` | Centered above trigger |
|
|
261
|
+
| `top-left` | Above, aligned to left edge |
|
|
262
|
+
| `top-right` | Above, aligned to right edge |
|
|
263
|
+
| `bottom` | Centered below trigger |
|
|
264
|
+
| `bottom-left` | Below, aligned to left edge |
|
|
265
|
+
| `bottom-right` | Below, aligned to right edge |
|
|
266
|
+
| `left` | Centered to the left |
|
|
267
|
+
| `right` | Centered to the right |
|
|
268
|
+
|
|
269
|
+
**Size Typography:**
|
|
270
|
+
|
|
271
|
+
| Size | Font Size | Line Height |
|
|
272
|
+
| :--- | :-------- | :---------- |
|
|
273
|
+
| sm | 14px | 16px |
|
|
274
|
+
| md | 16px | 18px |
|
|
275
|
+
| lg | 18px | 20px |
|
|
276
|
+
| xl | 20px | 22px |
|
|
277
|
+
|
|
278
|
+
## Theming
|
|
279
|
+
|
|
280
|
+
Tooltip uses the design system theme for colors:
|
|
281
|
+
|
|
282
|
+
```typescript
|
|
283
|
+
// Colors accessed via theme
|
|
284
|
+
theme.colors.background.inverse // Tooltip background
|
|
285
|
+
theme.colors.content.inverse // Tooltip text
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
## Accessibility
|
|
289
|
+
|
|
290
|
+
- Tooltip appears on focus for keyboard users
|
|
291
|
+
- Press Escape to dismiss tooltip
|
|
292
|
+
- Arrow indicator points to trigger element
|
|
293
|
+
- Content is accessible to screen readers
|
|
294
|
+
- Follows WCAG tooltip guidelines
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-tooltip",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.101.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-button": "0.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-button": "0.101.0",
|
|
17
|
+
"@xsolla/xui-core": "0.101.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.101.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|