woby-tooltip 1.0.4 → 1.0.9

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 (24) hide show
  1. package/README.md +99 -212
  2. package/build/index.es.js +2756 -0
  3. package/build/index.html +21 -0
  4. package/{dist → build}/style.css +249 -680
  5. package/dist/index.es.js +212 -387
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/output.css +249 -680
  8. package/dist/types/Tooltip.d.ts +9 -46
  9. package/dist/types/Tooltip.d.ts.map +1 -0
  10. package/dist/types/index.d.ts +1 -0
  11. package/dist/types/index.d.ts.map +1 -0
  12. package/package.json +24 -16
  13. package/tailwind.config.js +11 -11
  14. package/tsconfig.json +61 -59
  15. package/tsconfig.tsbuildinfo +1 -0
  16. package/tsconfig.web.json +61 -0
  17. package/{vite.config.ts → vite.config.mts} +40 -40
  18. package/{vite.config.web.ts → vite.config.web.mts} +8 -6
  19. package/dist/index.cjs.js +0 -406
  20. package/dist/index.cjs.js.map +0 -1
  21. package/dist/index.umd.js +0 -408
  22. package/dist/index.umd.js.map +0 -1
  23. package/dist/types/Arrow.d.ts +0 -7
  24. package/dist/types/TextBox.d.ts +0 -48
package/README.md CHANGED
@@ -1,229 +1,116 @@
1
1
  # woby-tooltip
2
2
 
3
- <img width="250px" src="https://media.giphy.com/media/Rd6sPjQFVHOSwe9rbW/giphy.gif" />
3
+ ### Tooltip Component Documentation
4
4
 
5
- A **powerful** and **elegant** alternative for all your tooltips and menu needs.
5
+ This documentation explains the `Tooltip` and `TooltipContent` components designed for flexible tooltip positioning and styling in a web application using **Woby.js** and **Tailwind CSS**.
6
6
 
7
- - **Different Types** - For every use context: Choose between _Hoverable_, _Static_ &amp; _Alert_ tooltips.
8
- - **Fully Customizable** - Easily change default settings via props
9
- - **Reliable Positioning** - Align your tooltip to your
10
- target element with ease
11
- - Tailwind CSS
12
- - React Hooks
7
+ ---
13
8
 
14
- Ported from [react-power-tooltip](https://justinrhodes1.github.io/react-power-tooltip/) pages to see all use cases.
9
+ ### **Overview**
15
10
 
16
- ## DEMO
17
- ```
18
- pnpm dev
11
+ This tooltip system provides:
12
+ - **Dynamic positioning** (`top`, `right`, `bottom`, `left`).
13
+ - **Customizable styles** for tooltips and arrows.
14
+ - **Automatic tooltip visibility** on hover.
15
+ - Integration with **Tailwind CSS** and **Woby.js observables** for reactivity.
16
+
17
+ ---
18
+
19
+ ### Installation
20
+
21
+ ```ps
22
+ pnpm i woby woby-styled use-woby woby-tooltip
19
23
  ```
20
24
 
21
- ## Installation
25
+ ### **Usage**
22
26
 
23
- ### NPM
27
+ #### **Basic Tooltip Example**
24
28
 
25
- ```bash
26
- pnpm install woby-tooltip
29
+ ```tsx
30
+ import { Tooltip, TooltipContent } from './Tooltip';
31
+
32
+ const App = () => (
33
+ <div class="flex items-center justify-center h-screen">
34
+ <Tooltip>
35
+ Hover me
36
+ <TooltipContent position="top">
37
+ <p>This is a tooltip!</p>
38
+ </TooltipContent>
39
+ </Tooltip>
40
+ </div>
41
+ );
42
+
43
+ export default App;
27
44
  ```
28
45
 
29
- ## Usage
46
+ ---
47
+
48
+ ### **Props**
30
49
 
31
- **Important**: Set the position of the hoverable parent component to *relative*.
50
+ #### **Tooltip**
51
+ | Prop Name | Type | Default | Description |
52
+ |-----------|----------------------------------|----------------------|----------------------------------------------|
53
+ | `children`| `JSX.Element` | `undefined` | The content inside the tooltip container. |
54
+ | `class` | `string` | `tooltipDef` | Custom class for tooltip container. |
55
+ | `className`| `string` | `undefined` | Additional class for tooltip container. |
56
+
57
+ #### **TooltipContent**
58
+ | Prop Name | Type | Default | Description |
59
+ |----------------|-------------------------------------------|------------|-----------------------------------------------------------------------------|
60
+ | `position` | `'top' | 'right' | 'bottom' | 'left'` | `'top'` | Tooltip position relative to its parent. |
61
+ | `arrowLocation`| `ObservableMaybe<string \| number>` | `'50%'` | Arrow's location relative to the tooltip (`50%` for centered). |
62
+ | `arrowSize` | `ObservableMaybe<string \| number>` | `'12px'` | Arrow size. |
63
+ | `static` | `ObservableMaybe<boolean>` | `false` | If `true`, keeps the tooltip always visible. |
64
+ | `class` | `string` | Dynamic | Dynamic class for tooltip styling based on position. |
65
+ | `style` | `ObservableMaybe<CSSStyleDeclaration>` | `undefined`| Custom styles for tooltip content. |
66
+
67
+ ---
68
+
69
+ ### **Advanced Examples**
70
+
71
+ #### **Dynamic Arrow Size and Location**
32
72
 
33
73
  ```tsx
34
- import { $, $$, useMemo } from 'woby'
35
- import { Tooltip } from 'woby-tooltip'
36
-
37
- export const AlignPositions = () => {
38
- const hover = $<string | boolean>(false)
39
-
40
- // const hoverHandler = (side: boolean) => setHover(side)
41
-
42
- return <div class='relative text-sm w-[250px]'>
43
- <Tooltip
44
- show={useMemo(() => $$(hover) === 'left')}
45
- position="left top"
46
- arrowAlign="center"
47
- textboxWidth="auto"
48
- static
49
- >
50
- <span>Top</span>
51
- </Tooltip>
52
- <Tooltip
53
- show={useMemo(() => $$(hover) === 'left')}
54
- position="left center"
55
- arrowAlign="center"
56
- textboxWidth="auto"
57
- static
58
- >
59
- <span>Center</span>
60
- </Tooltip>
61
- <Tooltip
62
- show={useMemo(() => $$(hover) === 'left')}
63
- position="left bottom"
64
- arrowAlign="center"
65
- textboxWidth="auto"
66
- static
67
- >
68
- <span>Bottom</span>
69
- </Tooltip>
70
- <Tooltip
71
- show={useMemo(() => $$(hover) === 'right')}
72
- position="right top"
73
- arrowAlign="center"
74
- textboxWidth="auto"
75
- static
76
- >
77
- <span>Top</span>
78
- </Tooltip>
79
- <Tooltip
80
- show={useMemo(() => $$(hover) === 'right')}
81
- position="right center"
82
- arrowAlign="center"
83
- textboxWidth="auto"
84
- static
85
- >
86
- <span>Center</span>
87
- </Tooltip>
88
- <Tooltip
89
- show={useMemo(() => $$(hover) === 'right')}
90
- position="right bottom"
91
- arrowAlign="center"
92
- textboxWidth="auto"
93
- static
94
- >
95
- <span>Bottom</span>
96
- </Tooltip>
97
- <Tooltip
98
- show={useMemo(() => $$(hover) === 'top')}
99
- position="top left"
100
- arrowAlign="center"
101
- textboxWidth="auto"
102
- static
103
- >
104
- <span>Left</span>
105
- </Tooltip>
106
- <Tooltip
107
- show={useMemo(() => $$(hover) === 'top')}
108
- position="top center"
109
- arrowAlign="center"
110
- textboxWidth="auto"
111
- static
112
- >
113
- <span>Center</span>
114
- </Tooltip>
115
- <Tooltip
116
- show={useMemo(() => $$(hover) === 'top')}
117
- position="top right"
118
- arrowAlign="center"
119
- textboxWidth="auto"
120
- static
121
- >
122
- <span>Right</span>
123
- </Tooltip>
124
- <Tooltip
125
- show={useMemo(() => $$(hover) === 'bottom')}
126
- position="bottom left"
127
- arrowAlign="center"
128
- textboxWidth="auto"
129
- static
130
- >
131
- <span>Left</span>
132
- </Tooltip>
133
- <Tooltip
134
- show={useMemo(() => $$(hover) === 'bottom')}
135
- position="bottom center"
136
- arrowAlign="center"
137
- textboxWidth="auto"
138
- static
139
- >
140
- <span>Center</span>
141
- </Tooltip>
142
- <Tooltip
143
- show={useMemo(() => $$(hover) === 'bottom')}
144
- position="bottom right"
145
- arrowAlign="center"
146
- textboxWidth="auto"
147
- static
148
- >
149
- <span>Right</span>
150
- </Tooltip>
151
- <div class="square purpleGradient">
152
- <div class='absolute w-full h-full flex items-center justify-center text-[15px]'>
153
- <div class='w-[70%] flex flex-row justify-between'>
154
- <span>Left</span>
155
- <span>Right</span>
156
- </div>
157
- </div>
158
- <div class='absolute w-full h-full flex items-center justify-center text-[15px]'>
159
- <div class='h-[70%] flex flex-col justify-between items-center'>
160
- <span>Top</span>
161
- <span>Bottom</span>
162
- </div>
163
- </div>
164
- <div
165
- class="left"
166
- onMouseEnter={() => hover('left')}
167
- onMouseLeave={() => hover(false)}
168
- />
169
- <div
170
- class="top"
171
- onMouseEnter={() => hover('top')}
172
- onMouseLeave={() => hover(false)}
173
- />
174
- <div
175
- class="right"
176
- onMouseEnter={() => hover('right')}
177
- onMouseLeave={() => hover(false)}
178
- />
179
- <div
180
- class="bottom"
181
- onMouseEnter={() => hover('bottom')}
182
- onMouseLeave={() => hover(false)}
183
- />
184
- </div>
185
- </div>
186
- }
74
+ <Tooltip>
75
+ Hover for details
76
+ <TooltipContent
77
+ position="right"
78
+ arrowLocation="75%"
79
+ arrowSize="16px"
80
+ >
81
+ <p>Tooltip with a custom arrow size and location.</p>
82
+ </TooltipContent>
83
+ </Tooltip>
84
+ ```
187
85
 
86
+ #### **Custom Styling**
87
+
88
+ You can override default styles using Tailwind classes or inline styles:
89
+
90
+ ```tsx
91
+ <Tooltip class="bg-blue-500 text-white p-2 rounded">
92
+ Hover for info
93
+ <TooltipContent
94
+ position="bottom"
95
+ class="bg-yellow-300 text-black shadow-lg"
96
+ arrowSize="8px"
97
+ >
98
+ <p>Custom styled tooltip!</p>
99
+ </TooltipContent>
100
+ </Tooltip>
188
101
  ```
189
- ## API
190
-
191
- | Props | Types / Options | Default | Description |
192
- | --------------- | --------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------- |
193
- | show | bool: false, true | false | Mount tooltip if true. |
194
- | fontFamily | string: font family | 'inherit' | Font family of text |
195
- | fontSize | string: px | 'inherit' | Font size of text |
196
- | fontWeight | string | 'bold' | Font weight of text |
197
- | color | string | 'inherit' | Font color of text |
198
- | animation | string: fade _or_ bounce | 'fade' | Mount/Unmount anmation. Custom animations: See advanced usage examples. |
199
- | hoverBackground | string: hex colors | '#ececec' | Background color on hover |
200
- | hoverColor | string: hex colors | '#000000' | Font color on hover |
201
- | backgroundColor | string: hex colors | '#ffffff' | Background color |
202
- | alert | string: rgb colors | false | Pulse animation |
203
- | textboxWidth | string: px _or_ auto | '150px' | Width of the text box |
204
- | padding | string: px | '15px 20px' | Padding of text |
205
- | borderRadius | string: px | '5px' | Radius of corners |
206
- | zIndex | string: number | '100' | Z-index of tooltip |
207
- | moveDown | string: px | '0px' | Downward position adjustment |
208
- | moveRight | string: px | '0px' | Right position adjustment |
209
- | static | boolean: false _or_ true | false | Disable hover animations |
210
- | flat | boolean: false _or_ true | false | Disable shadows |
211
- | lineSeparated | boolean: false _or_ true _or_ string: css border property | '1px solid #ececec' | Enable &mp; specify line separation between options |
212
- | arrowAlign | string: 'start' _or_ 'center' _or_ 'end' | 'start' | Positions arrow relative to textbox |
213
- | position | string: 'position1 position2' | 'right center' | Positions tooltip relative to target element |
214
-
215
-
216
-
217
- ## Development
218
-
219
- You're welcome to contribute to woby-power-tooltip.
220
-
221
- To set up the project:
222
-
223
- 1. Fork and clone the repository
224
- 2. `$ npm install`
225
- 3. `$ npm run dev`
226
-
227
- ## License
228
-
229
- MIT
102
+
103
+ ---
104
+
105
+
106
+ ### **Requirements**
107
+
108
+ - **Woby.js**: For observables and reactivity.
109
+ - **Tailwind CSS**: For utility-first styling.
110
+ - **Woby-styled**: For styled components with dynamic styles.
111
+
112
+ ---
113
+
114
+ ### **License**
115
+
116
+ This component is open-source under the [MIT License](https://opensource.org/licenses/MIT). Contributions and feedback are welcome!