@versini/ui-tooltip 2.1.4 → 2.1.5
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 +70 -8
- package/dist/index.js +3 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -4,14 +4,24 @@
|
|
|
4
4
|
|
|
5
5
|
> An accessible React tooltip component built with TypeScript and TailwindCSS.
|
|
6
6
|
|
|
7
|
-
The Tooltip component provides contextual help and information with proper accessibility support and
|
|
8
|
-
|
|
7
|
+
The Tooltip component provides contextual help and information with proper accessibility support, adaptive placement, delayed appearance, and theme awareness.
|
|
9
8
|
|
|
10
9
|
## Table of Contents
|
|
11
10
|
|
|
12
11
|
- [Features](#features)
|
|
13
12
|
- [Installation](#installation)
|
|
14
13
|
- [Usage](#usage)
|
|
14
|
+
- [Examples](#examples)
|
|
15
|
+
- [API](#api)
|
|
16
|
+
|
|
17
|
+
## Features
|
|
18
|
+
|
|
19
|
+
- **🧭 Smart Positioning**: Uses Floating UI for collision-aware placement & arrow positioning
|
|
20
|
+
- **⏱️ Show Delay**: Configurable appearance delay (`delay` prop)
|
|
21
|
+
- **♿ Accessible**: Proper `role="tooltip"`, hover & focus behavior, optional disabling period
|
|
22
|
+
- **🎨 Theming**: Supports light / dark / system / alt-system modes
|
|
23
|
+
- **🪶 Lightweight**: Minimal DOM & style footprint; only renders when visible
|
|
24
|
+
- **⚡ Adaptive**: Auto flips / shifts to remain within viewport
|
|
15
25
|
|
|
16
26
|
## Installation
|
|
17
27
|
|
|
@@ -19,7 +29,7 @@ The Tooltip component provides contextual help and information with proper acces
|
|
|
19
29
|
npm install @versini/ui-tooltip
|
|
20
30
|
```
|
|
21
31
|
|
|
22
|
-
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [
|
|
32
|
+
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [installation documentation](https://versini-org.github.io/ui-components/?path=/docs/getting-started-installation--docs) for complete setup instructions.
|
|
23
33
|
|
|
24
34
|
## Usage
|
|
25
35
|
|
|
@@ -27,10 +37,62 @@ npm install @versini/ui-tooltip
|
|
|
27
37
|
import { Tooltip } from "@versini/ui-tooltip";
|
|
28
38
|
|
|
29
39
|
function App() {
|
|
30
|
-
return
|
|
31
|
-
<Tooltip content="This is a helpful tooltip">
|
|
32
|
-
<button>Hover me</button>
|
|
33
|
-
</Tooltip>
|
|
34
|
-
);
|
|
40
|
+
return <Tooltip label="Helpful tip" trigger={<button>Hover me</button>} />;
|
|
35
41
|
}
|
|
36
42
|
```
|
|
43
|
+
|
|
44
|
+
## Examples
|
|
45
|
+
|
|
46
|
+
### Different Placements
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<div className="flex flex-wrap gap-4">
|
|
50
|
+
<Tooltip label="Top" placement="top" trigger={<button>Top</button>} />
|
|
51
|
+
<Tooltip label="Right" placement="right" trigger={<button>Right</button>} />
|
|
52
|
+
<Tooltip
|
|
53
|
+
label="Bottom"
|
|
54
|
+
placement="bottom"
|
|
55
|
+
trigger={<button>Bottom</button>}
|
|
56
|
+
/>
|
|
57
|
+
<Tooltip label="Left" placement="left" trigger={<button>Left</button>} />
|
|
58
|
+
</div>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Custom Delay & Dark Mode
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
<Tooltip
|
|
65
|
+
label="Appears after 1s"
|
|
66
|
+
delay={1000}
|
|
67
|
+
mode="dark"
|
|
68
|
+
trigger={<button>Delayed</button>}
|
|
69
|
+
/>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Styling the Tooltip & Arrow
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
<Tooltip
|
|
76
|
+
label="Custom styled"
|
|
77
|
+
tooltipClassName="bg-indigo-600 text-white text-sm"
|
|
78
|
+
arrowClassName="bg-indigo-600"
|
|
79
|
+
trigger={<button>Custom</button>}
|
|
80
|
+
/>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## API
|
|
84
|
+
|
|
85
|
+
### Tooltip Props
|
|
86
|
+
|
|
87
|
+
| Prop | Type | Default | Description |
|
|
88
|
+
| ------------------ | --------------------------------------- | ------- | -------------------------------------------------- | ------------- | ---------- | ------------------------------ |
|
|
89
|
+
| `label` | `string` | - | Text content of the tooltip. |
|
|
90
|
+
| `trigger` | `React.ReactNode` | - | Element that the tooltip is anchored to. |
|
|
91
|
+
| `placement` | `Placement` (from `@floating-ui/react`) | `"top"` | Preferred initial placement (auto flips / shifts). |
|
|
92
|
+
| `mode` | `"dark" | "light" | "system" | "alt-system"` | `"system"` | Theme mode controlling colors. |
|
|
93
|
+
| `delay` | `number` | `300` | Milliseconds before showing tooltip. |
|
|
94
|
+
| `className` | `string` | - | Extra classes for outer wrapper. |
|
|
95
|
+
| `tooltipClassName` | `string` | - | Extra classes for tooltip bubble. |
|
|
96
|
+
| `arrowClassName` | `string` | - | Extra classes for tooltip arrow element. |
|
|
97
|
+
|
|
98
|
+
> Tooltip appears on hover/focus, hides on leave/click, and temporarily disables after click to prevent flicker.
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { TOOLTIP_ARROW_CLASSNAME as T, TOOLTIP_CLASSNAME as I, Tooltip as e } from "./components/Tooltip/Tooltip.js";
|
|
2
2
|
/*!
|
|
3
|
-
@versini/ui-tooltip v2.1.
|
|
3
|
+
@versini/ui-tooltip v2.1.5
|
|
4
4
|
© 2025 gizmette.com
|
|
5
5
|
*/
|
|
6
6
|
try {
|
|
7
7
|
window.__VERSINI_UI_TOOLTIP__ || (window.__VERSINI_UI_TOOLTIP__ = {
|
|
8
|
-
version: "2.1.
|
|
9
|
-
buildTime: "08/23/2025
|
|
8
|
+
version: "2.1.5",
|
|
9
|
+
buildTime: "08/23/2025 10:08 AM EDT",
|
|
10
10
|
homepage: "https://github.com/aversini/ui-components",
|
|
11
11
|
license: "MIT"
|
|
12
12
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-tooltip",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"sideEffects": [
|
|
55
55
|
"**/*.css"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "a1afd6e4613b1da7abf61d10a72614611521fb39"
|
|
58
58
|
}
|