woby-tooltip 1.0.2
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/LICENSE +21 -0
- package/README.md +229 -0
- package/index.html +20 -0
- package/package.json +51 -0
- package/tailwind.config.js +11 -0
- package/tsconfig.json +60 -0
- package/vite.config.ts +40 -0
- package/vite.config.web.ts +35 -0
package/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2018 Justin Rhodes
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
@@ -0,0 +1,229 @@
|
|
1
|
+
# woby-tooltip
|
2
|
+
|
3
|
+
<img width="250px" src="https://media.giphy.com/media/Rd6sPjQFVHOSwe9rbW/giphy.gif" />
|
4
|
+
|
5
|
+
A **powerful** and **elegant** alternative for all your tooltips and menu needs.
|
6
|
+
|
7
|
+
- **Different Types** - For every use context: Choose between _Hoverable_, _Static_ & _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
|
13
|
+
|
14
|
+
Ported from [react-power-tooltip](https://justinrhodes1.github.io/react-power-tooltip/) pages to see all use cases.
|
15
|
+
|
16
|
+
## DEMO
|
17
|
+
```
|
18
|
+
pnpm dev
|
19
|
+
```
|
20
|
+
|
21
|
+
## Installation
|
22
|
+
|
23
|
+
### NPM
|
24
|
+
|
25
|
+
```bash
|
26
|
+
pnpm install woby-tooltip
|
27
|
+
```
|
28
|
+
|
29
|
+
## Usage
|
30
|
+
|
31
|
+
**Important**: Set the position of the hoverable parent component to *relative*.
|
32
|
+
|
33
|
+
```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
|
+
}
|
187
|
+
|
188
|
+
```
|
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 ∓ 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
|
package/index.html
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en">
|
3
|
+
|
4
|
+
<head>
|
5
|
+
<meta charset="UTF-8">
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
8
|
+
<!-- <meta name="description" content="CHANGE THIS"> -->
|
9
|
+
<title>React-power-tooltip | The ultimate tooltip library</title>
|
10
|
+
<link rel="stylesheet"
|
11
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" />
|
12
|
+
<script type="module" src="./src/docs/index.tsx"></script>
|
13
|
+
</head>
|
14
|
+
|
15
|
+
<body>
|
16
|
+
<div id="app"></div>
|
17
|
+
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
18
|
+
</body>
|
19
|
+
|
20
|
+
</html>
|
package/package.json
ADDED
@@ -0,0 +1,51 @@
|
|
1
|
+
{
|
2
|
+
"name": "woby-tooltip",
|
3
|
+
"version": "1.0.2",
|
4
|
+
"description": "A powerful tooltip and menu component library for woby.",
|
5
|
+
"main": "./dist/index.cjs.js",
|
6
|
+
"module": "./dist/index.es.js",
|
7
|
+
"browser": "./dist/index.umd.js",
|
8
|
+
"types": "./dist/types/index.d.ts",
|
9
|
+
"scripts": {
|
10
|
+
"css:watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
|
11
|
+
"css": "tailwindcss -i ./src/input.css -o ./dist/output.css",
|
12
|
+
"declaration": "tsc --build --force --declaration --emitDeclarationOnly --verbose",
|
13
|
+
"declaration:watch": "tsc --build --force --declaration --emitDeclarationOnly --verbose --watch",
|
14
|
+
"watch": "run-p build:watch css:watch",
|
15
|
+
"build": "run-s css build:vite css",
|
16
|
+
"build:web": "vite build --config=vite.config.web.ts --force --mode production",
|
17
|
+
"web": "vite preview --config=vite.config.web.ts --host",
|
18
|
+
"dev:only": "vite --config=vite.config.web.ts --force --mode dev --host",
|
19
|
+
"dev": "run-p css:watch dev:only",
|
20
|
+
"build:vite": "vite build",
|
21
|
+
"build:watch": "vite build --watch",
|
22
|
+
"preview": "vite preview --host",
|
23
|
+
"icon": "node ./node_modules/svg2tsx/cli/index.js"
|
24
|
+
},
|
25
|
+
"keywords": [
|
26
|
+
"tooltip",
|
27
|
+
"notification",
|
28
|
+
"menu",
|
29
|
+
"woby",
|
30
|
+
"woby-component"
|
31
|
+
],
|
32
|
+
"license": "MIT",
|
33
|
+
"peerDependencies": {
|
34
|
+
"woby": "workspace:../woby"
|
35
|
+
},
|
36
|
+
"devDependencies": {
|
37
|
+
"concurrently": "^3.6.1",
|
38
|
+
"puppeteer": "^1.20.0",
|
39
|
+
"style-loader": "^0.21.0",
|
40
|
+
"svg2tsx": "workspace:../svg2tsx",
|
41
|
+
"tailwindcss": "^3.3.3",
|
42
|
+
"vite": "^4.4.11",
|
43
|
+
"vite-plugin-dts": "^2.3.0"
|
44
|
+
},
|
45
|
+
"author": "Chi Chong <wongchichong@gmail.com>",
|
46
|
+
"homepage": "https://github.com/wongchichong/woby-tooltip",
|
47
|
+
"repository": {
|
48
|
+
"type": "git",
|
49
|
+
"url": "git@github.com:wongchichong/woby-tooltip.git"
|
50
|
+
}
|
51
|
+
}
|
package/tsconfig.json
ADDED
@@ -0,0 +1,60 @@
|
|
1
|
+
{
|
2
|
+
"compilerOptions": {
|
3
|
+
"allowJs": false,
|
4
|
+
"allowSyntheticDefaultImports": true,
|
5
|
+
"allowUnreachableCode": false,
|
6
|
+
"allowUnusedLabels": false,
|
7
|
+
"alwaysStrict": true,
|
8
|
+
"declaration": true,
|
9
|
+
"declarationDir": "./dist/types",
|
10
|
+
"disableSizeLimit": true,
|
11
|
+
"esModuleInterop": false,
|
12
|
+
"forceConsistentCasingInFileNames": true,
|
13
|
+
// "importsNotUsedAsValues": "error",
|
14
|
+
"inlineSourceMap": false,
|
15
|
+
"inlineSources": false,
|
16
|
+
// "isolatedModules": true,
|
17
|
+
"jsx": "react-jsx",
|
18
|
+
"jsxImportSource": "woby",
|
19
|
+
"lib": [
|
20
|
+
"dom",
|
21
|
+
"esnext",
|
22
|
+
"WebWorker"
|
23
|
+
],
|
24
|
+
"module": "esnext",
|
25
|
+
"moduleResolution": "node",
|
26
|
+
"newLine": "lf",
|
27
|
+
"noEmitOnError": false,
|
28
|
+
"noImplicitThis": true,
|
29
|
+
"noPropertyAccessFromIndexSignature": false,
|
30
|
+
"noUnusedLocals": false,
|
31
|
+
"noUnusedParameters": false,
|
32
|
+
"outDir": "dist",
|
33
|
+
"pretty": true,
|
34
|
+
"skipDefaultLibCheck": true,
|
35
|
+
"skipLibCheck": true,
|
36
|
+
"sourceMap": false,
|
37
|
+
"strict": true,
|
38
|
+
"strictBindCallApply": true,
|
39
|
+
"strictFunctionTypes": true,
|
40
|
+
"strictNullChecks": false,
|
41
|
+
"target": "es2020",
|
42
|
+
"useDefineForClassFields": false,
|
43
|
+
"useUnknownInCatchVariables": true,
|
44
|
+
"noImplicitAny": false,
|
45
|
+
"noUncheckedIndexedAccess": false,
|
46
|
+
"baseUrl": ".",
|
47
|
+
"rootDir": "./src",
|
48
|
+
"typeRoots": [
|
49
|
+
"types",
|
50
|
+
"voby/dist/types/jsx"
|
51
|
+
],
|
52
|
+
// "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo",
|
53
|
+
// "composite": true,
|
54
|
+
},
|
55
|
+
"exclude": [
|
56
|
+
"node_modules",
|
57
|
+
"vite.config.ts",
|
58
|
+
"dist*"
|
59
|
+
]
|
60
|
+
}
|
package/vite.config.ts
ADDED
@@ -0,0 +1,40 @@
|
|
1
|
+
import { defineConfig } from 'vite'
|
2
|
+
import path from 'path'
|
3
|
+
import dts from 'vite-plugin-dts'
|
4
|
+
|
5
|
+
const config = defineConfig({
|
6
|
+
build: {
|
7
|
+
minify: false,
|
8
|
+
lib: {
|
9
|
+
entry: ["./src/lib/index.tsx"],
|
10
|
+
name: 'woby',
|
11
|
+
formats: ['cjs', 'es', 'umd'],
|
12
|
+
fileName: (format: string, entryName: string) => `${entryName}.${format}.js`
|
13
|
+
},
|
14
|
+
sourcemap: true,
|
15
|
+
rollupOptions: {
|
16
|
+
external: ['woby', 'woby/jsx-runtime', 'oby', 'woby/jsx-runtime'],
|
17
|
+
output: {
|
18
|
+
globals: {
|
19
|
+
'woby': 'woby',
|
20
|
+
'woby/jsx-runtime': 'woby/jsx-runtime',
|
21
|
+
}
|
22
|
+
}
|
23
|
+
}
|
24
|
+
},
|
25
|
+
esbuild: {
|
26
|
+
jsx: 'automatic',
|
27
|
+
},
|
28
|
+
plugins: [
|
29
|
+
dts({ entryRoot: './src/lib', outputDir: './dist/types' })
|
30
|
+
],
|
31
|
+
resolve: {
|
32
|
+
alias: {
|
33
|
+
'~': path.resolve(__dirname, 'src'),
|
34
|
+
},
|
35
|
+
},
|
36
|
+
})
|
37
|
+
|
38
|
+
|
39
|
+
|
40
|
+
export default config
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import { defineConfig } from 'vite'
|
2
|
+
import path from 'path'
|
3
|
+
// import dts from 'vite-plugin-dts'
|
4
|
+
|
5
|
+
const config = defineConfig({
|
6
|
+
build: {
|
7
|
+
minify: false,
|
8
|
+
lib: {
|
9
|
+
entry: ["./index.html"],
|
10
|
+
name: "woby-power-tooltip",
|
11
|
+
formats: ['cjs', 'es', 'umd'],
|
12
|
+
fileName: (format: string, entryName: string) => `${entryName}.${format}.js`
|
13
|
+
},
|
14
|
+
outDir: './build',
|
15
|
+
sourcemap: false,
|
16
|
+
},
|
17
|
+
esbuild: {
|
18
|
+
jsx: 'automatic',
|
19
|
+
},
|
20
|
+
plugins: [
|
21
|
+
// dts({ entryRoot: './src', outputDir: './dist/types' })
|
22
|
+
],
|
23
|
+
resolve: {
|
24
|
+
alias: {
|
25
|
+
'~': path.resolve(__dirname, 'src'),
|
26
|
+
'woby/jsx-dev-runtime': process.argv.includes('dev') ? path.resolve('../woby/src/jsx/runtime') : 'woby/jsx-dev-runtime',
|
27
|
+
'woby/jsx-runtime': process.argv.includes('dev') ? path.resolve('../woby/src/jsx/runtime') : 'woby/jsx-runtime',
|
28
|
+
'woby': process.argv.includes('dev') ? path.resolve('../woby/src') : 'woby'
|
29
|
+
},
|
30
|
+
},
|
31
|
+
})
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
export default config
|