@xsolla/xui-tooltip 0.174.3 → 0.175.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 +42 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,48 @@
|
|
|
1
1
|
# Tooltip
|
|
2
2
|
|
|
3
3
|
A hover- or focus-triggered popover that displays contextual information next to a trigger element. Web-only rendering (uses a portal); on React Native the trigger is rendered without the tooltip surface.
|
|
4
|
+
<!-- BEGIN:xui-mcp-instructions:tooltip -->
|
|
5
|
+
Tooltip is a small popup that shows brief, supplementary information when the user hovers or focuses an element. Its pointer indicates the element it describes, and its position (top, bottom, left, right, and corners) keeps it anchored to that.
|
|
6
|
+
|
|
7
|
+
### When to use
|
|
8
|
+
|
|
9
|
+
- To clarify an icon-only control or a truncated value on hover or focus
|
|
10
|
+
- To give a short hint or extra context without cluttering the interface
|
|
11
|
+
- When the information is helpful but not essential to complete the task
|
|
12
|
+
|
|
13
|
+
### When not to use
|
|
14
|
+
|
|
15
|
+
- For essential information the user must see — place it directly in the UI
|
|
16
|
+
- For long or interactive content — use a Popover or Modal instead
|
|
17
|
+
- As a replacement for a visible Label
|
|
18
|
+
- On controls where hover isn't reliably available without a clear tap pattern
|
|
19
|
+
|
|
20
|
+
### Content guidelines
|
|
21
|
+
|
|
22
|
+
Keep the text short — one or two lines of plain language.
|
|
23
|
+
|
|
24
|
+
Describe or clarify; don*'t restate what'*s already obvious on screen.
|
|
25
|
+
|
|
26
|
+
Match the size (S, M, L, XL) to the surrounding context and keep it consistent.
|
|
27
|
+
|
|
28
|
+
### Behaviour guidelines
|
|
29
|
+
|
|
30
|
+
Appears on hover or keyboard focus of the trigger and dismisses on mouse-out, blur, or Escape, ideally with a small delay to avoid flicker.
|
|
31
|
+
|
|
32
|
+
Position — the pointer aims at the trigger; choose the placement that keeps the tooltip fully on screen and let it flip when space is tight.
|
|
33
|
+
|
|
34
|
+
Show only one tooltip at a time, and don't let it cover the element it describes
|
|
35
|
+
|
|
36
|
+
### Accessibility
|
|
37
|
+
|
|
38
|
+
The trigger must be focusable so the tooltip appears on keyboard focus, not hover alone.
|
|
39
|
+
|
|
40
|
+
Associate the tooltip with its trigger via aria-describedby so screen readers announce it.
|
|
41
|
+
|
|
42
|
+
Make it dismissible with Escape and keep it readable long enough to move the pointer onto it.
|
|
43
|
+
|
|
44
|
+
Never place essential or interactive content in a tooltip, and ensure the text meets contrast minimums.
|
|
45
|
+
<!-- END:xui-mcp-instructions:tooltip -->
|
|
4
46
|
|
|
5
47
|
## Installation
|
|
6
48
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-tooltip",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.175.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.175.0",
|
|
17
|
+
"@xsolla/xui-core": "0.175.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.175.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|