@fvc/tooltip 1.0.1 → 1.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997

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.
Files changed (2) hide show
  1. package/README.md +163 -0
  2. package/package.json +12 -1
package/README.md ADDED
@@ -0,0 +1,163 @@
1
+ # @fvc/tooltip
2
+
3
+ `@fvc/tooltip` provides a tooltip component built on top of Ant Design's `Tooltip`. It applies the FE-VIS class prefix and token-based border-radius, and exposes the full Ant Design API alongside a `testId` prop for test targeting.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ bun add @fvc/tooltip
9
+ ```
10
+
11
+ ## Peer Dependencies
12
+
13
+ The package expects these dependencies to be available in the consuming application:
14
+
15
+ ```bash
16
+ bun add react antd
17
+ ```
18
+
19
+ ## Import
20
+
21
+ ```tsx
22
+ import { Tooltip } from '@fvc/tooltip';
23
+ ```
24
+
25
+ ## Quick Start
26
+
27
+ ```tsx
28
+ import { Tooltip } from '@fvc/tooltip';
29
+
30
+ export function InfoIcon() {
31
+ return (
32
+ <Tooltip title="More information about this field">
33
+ <span>?</span>
34
+ </Tooltip>
35
+ );
36
+ }
37
+ ```
38
+
39
+ ## Common Usage
40
+
41
+ ### Basic Tooltip
42
+
43
+ ```tsx
44
+ <Tooltip title="Save changes">
45
+ <Button>Save</Button>
46
+ </Tooltip>
47
+ ```
48
+
49
+ ### Placement
50
+
51
+ ```tsx
52
+ <Tooltip title="Top tooltip" placement="top">
53
+ <span>Hover me</span>
54
+ </Tooltip>
55
+
56
+ <Tooltip title="Bottom tooltip" placement="bottom">
57
+ <span>Hover me</span>
58
+ </Tooltip>
59
+ ```
60
+
61
+ ### Trigger on Click
62
+
63
+ ```tsx
64
+ <Tooltip title="Copied!" trigger="click">
65
+ <Button>Copy</Button>
66
+ </Tooltip>
67
+ ```
68
+
69
+ ### Controlled Visibility
70
+
71
+ ```tsx
72
+ const [open, setOpen] = useState(false);
73
+
74
+ <Tooltip title="Controlled tooltip" open={open} onOpenChange={setOpen}>
75
+ <span>Target</span>
76
+ </Tooltip>;
77
+ ```
78
+
79
+ ### Rich Content
80
+
81
+ ```tsx
82
+ <Tooltip title={<span>Custom <strong>HTML</strong> content</span>}>
83
+ <span>Hover me</span>
84
+ </Tooltip>
85
+ ```
86
+
87
+ ## Props
88
+
89
+ Extends all [Ant Design `TooltipProps`](https://ant-design.antgroup.com/components/tooltip#api).
90
+
91
+ | Prop | Type | Description |
92
+ | -------------- | ----------- | ----------------------------------------------------------------------- |
93
+ | `title` | `ReactNode` | Tooltip content. |
94
+ | `placement` | `string` | Position relative to the target element. |
95
+ | `trigger` | `string` | Interaction that shows the tooltip (`'hover'`, `'click'`, `'focus'`). |
96
+ | `open` | `boolean` | Controls visibility (controlled mode). |
97
+ | `onOpenChange` | `function` | Callback when visibility changes. |
98
+ | `arrow` | `boolean` | Shows or hides the arrow pointer. |
99
+ | `testId` | `string` | Maps to `data-testid` on the tooltip trigger. |
100
+
101
+ ## TypeScript
102
+
103
+ The package ships with type definitions. No `@types/` install needed.
104
+
105
+ ```ts
106
+ import type { TooltipProps } from '@fvc/tooltip/types';
107
+ ```
108
+
109
+ ## Consumer Example
110
+
111
+ ```tsx
112
+ import { Tooltip } from '@fvc/tooltip';
113
+
114
+ export function FieldLabel({ label, hint }) {
115
+ return (
116
+ <label>
117
+ {label}
118
+ {hint && (
119
+ <Tooltip title={hint} placement="right">
120
+ <span aria-label="info">ℹ</span>
121
+ </Tooltip>
122
+ )}
123
+ </label>
124
+ );
125
+ }
126
+ ```
127
+
128
+ ## Testing
129
+
130
+ ```tsx
131
+ <Tooltip testId="save-tooltip" title="Save changes">
132
+ <Button>Save</Button>
133
+ </Tooltip>
134
+ ```
135
+
136
+ ```tsx
137
+ screen.getByTestId('save-tooltip');
138
+ ```
139
+
140
+ ## CSS Customisation
141
+
142
+ The component reads the following CSS custom property.
143
+
144
+ | Token | Used for |
145
+ | ------------------------------- | -------------------------------- |
146
+ | `--tooltip-inner-border-radius` | Border radius of the tooltip box |
147
+
148
+ To override, set it in your global styles:
149
+
150
+ ```css
151
+ :root {
152
+ --tooltip-inner-border-radius: 8px;
153
+ }
154
+ ```
155
+
156
+ ## Development
157
+
158
+ ```bash
159
+ bun run lint
160
+ bun run type-check
161
+ bun run test
162
+ bun run build
163
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fvc/tooltip",
3
- "version": "1.0.1",
3
+ "version": "1.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
4
4
  "main": "./dist/lib/index.js",
5
5
  "types": "./dist/lib/tooltip/src/index.d.ts",
6
6
  "files": [
@@ -26,6 +26,17 @@
26
26
  "type-check": "tsc --noEmit",
27
27
  "test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
28
28
  },
29
+ "keywords": [
30
+ "react",
31
+ "react-component",
32
+ "fvc",
33
+ "fe-vis-core",
34
+ "ui",
35
+ "tooltip",
36
+ "popover",
37
+ "design-system",
38
+ "antd"
39
+ ],
29
40
  "peerDependencies": {
30
41
  "react": "^18.0.0",
31
42
  "antd": "^5.0.0"