zero-tooltip 1.2.2 → 1.3.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 +148 -142
- package/dist/types/tooltipConfig.d.ts +2 -0
- package/dist/zero-tooltip.js +148 -127
- package/dist/zero-tooltip.umd.cjs +1 -1
- package/package.json +1 -1
- package/src/composables/useHideOnResize.ts +36 -36
- package/src/composables/useHideOnScroll.ts +49 -49
- package/src/index.ts +27 -27
- package/src/tooltip.ts +577 -521
- package/src/types/tooltipConfig.ts +23 -21
- package/src/types/tooltipLocalConfig.ts +7 -7
- package/src/types/tooltipPosition.ts +4 -4
- package/src/types/tooltipPositions.ts +10 -10
package/README.md
CHANGED
|
@@ -1,142 +1,148 @@
|
|
|
1
|
-
## zero-tooltip [](https://www.npmjs.com/package/zero-tooltip)
|
|
2
|
-
|
|
3
|
-
**zero-tooltip** is a Vue 3 simple tooltip component for displaying information text when hovering over element.
|
|
4
|
-
|
|
5
|
-
## About
|
|
6
|
-
The component is designed to enhance user interactions by providing informative tooltips when hovering over specific element by rendering overlay with given text next to it. Components settings are fully customizable.
|
|
7
|
-
|
|
8
|
-
## Install
|
|
9
|
-
|
|
10
|
-
```bash
|
|
11
|
-
# npm
|
|
12
|
-
npm install zero-tooltip
|
|
13
|
-
|
|
14
|
-
# yarn
|
|
15
|
-
yarn add zero-tooltip
|
|
16
|
-
|
|
17
|
-
# pnpm
|
|
18
|
-
pnpm install zero-tooltip
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
Register plugin and import styles in `main.ts`:
|
|
22
|
-
```ts
|
|
23
|
-
import ZeroTooltip from 'zero-tooltip'
|
|
24
|
-
import 'zero-tooltip/style.css'
|
|
25
|
-
|
|
26
|
-
const app = createApp(App)
|
|
27
|
-
|
|
28
|
-
app.use(ZeroTooltip)
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## Usage
|
|
32
|
-
|
|
33
|
-
Tooltip can be used with directive `v-tooltip` added on elements.
|
|
34
|
-
The given value is displayed as tooltip's text:
|
|
35
|
-
|
|
36
|
-
```html
|
|
37
|
-
<button v-tooltip="'Submits this form'">Submit</button>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## Zero dependencies
|
|
41
|
-
This component does not depend on any other package, except Vue 3
|
|
42
|
-
|
|
43
|
-
## Customization
|
|
44
|
-
Default position for tooltip is above/on top of the element that is being hovered. You can change position by passing argument to directive:
|
|
45
|
-
|
|
46
|
-
```html
|
|
47
|
-
<button v-tooltip:right="'Submits this form'">Submit</button>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
Acceptable arguments are: `left` | `top` | `right` | `bottom`. This will override tooltip default position that was set during plugin registering process.
|
|
51
|
-
|
|
52
|
-
You can also define default position globally when registering plugin:
|
|
53
|
-
|
|
54
|
-
```ts
|
|
55
|
-
app.use(ZeroTooltip, {
|
|
56
|
-
defaultPosition: 'right'
|
|
57
|
-
})
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
Tooltip component is fully customizable by giving config object as options when registering tooltip plugin:
|
|
61
|
-
```ts
|
|
62
|
-
import ZeroTooltipConfig from 'zero-tooltip'
|
|
63
|
-
|
|
64
|
-
const tooltipConfig: ZeroTooltipConfig = {
|
|
65
|
-
appendTo: ... ,
|
|
66
|
-
defaultPosition: ... ,
|
|
67
|
-
positions: ... ,
|
|
68
|
-
offsetFromSource: ... ,
|
|
69
|
-
offsetFromViewport: ... ,
|
|
70
|
-
minWidth: ... ,
|
|
71
|
-
maxWidth: ... ,
|
|
72
|
-
tooltipBorderWidth: ... ,
|
|
73
|
-
tooltipClasses: ... ,
|
|
74
|
-
textClasses: ... ,
|
|
75
|
-
arrowSize: ... ,
|
|
76
|
-
arrowClasses: ... ,
|
|
77
|
-
arrowMinOffsetFromTooltipCorner: ... ,
|
|
78
|
-
zIndex: ...
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
|
122
|
-
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
|
|
|
130
|
-
|
|
|
131
|
-
|
|
|
132
|
-
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
|
137
|
-
|
|
138
|
-
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
1
|
+
## zero-tooltip [](https://www.npmjs.com/package/zero-tooltip)
|
|
2
|
+
|
|
3
|
+
**zero-tooltip** is a Vue 3 simple tooltip component for displaying information text when hovering over element.
|
|
4
|
+
|
|
5
|
+
## About
|
|
6
|
+
The component is designed to enhance user interactions by providing informative tooltips when hovering over specific element by rendering overlay with given text next to it. Components settings are fully customizable.
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
# npm
|
|
12
|
+
npm install zero-tooltip
|
|
13
|
+
|
|
14
|
+
# yarn
|
|
15
|
+
yarn add zero-tooltip
|
|
16
|
+
|
|
17
|
+
# pnpm
|
|
18
|
+
pnpm install zero-tooltip
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Register plugin and import styles in `main.ts`:
|
|
22
|
+
```ts
|
|
23
|
+
import ZeroTooltip from 'zero-tooltip'
|
|
24
|
+
import 'zero-tooltip/style.css'
|
|
25
|
+
|
|
26
|
+
const app = createApp(App)
|
|
27
|
+
|
|
28
|
+
app.use(ZeroTooltip)
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
Tooltip can be used with directive `v-tooltip` added on elements.
|
|
34
|
+
The given value is displayed as tooltip's text:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<button v-tooltip="'Submits this form'">Submit</button>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Zero dependencies
|
|
41
|
+
This component does not depend on any other package, except Vue 3
|
|
42
|
+
|
|
43
|
+
## Customization
|
|
44
|
+
Default position for tooltip is above/on top of the element that is being hovered. You can change position by passing argument to directive:
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<button v-tooltip:right="'Submits this form'">Submit</button>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Acceptable arguments are: `left` | `top` | `right` | `bottom`. This will override tooltip default position that was set during plugin registering process.
|
|
51
|
+
|
|
52
|
+
You can also define default position globally when registering plugin:
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
app.use(ZeroTooltip, {
|
|
56
|
+
defaultPosition: 'right'
|
|
57
|
+
})
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Tooltip component is fully customizable by giving config object as options when registering tooltip plugin:
|
|
61
|
+
```ts
|
|
62
|
+
import ZeroTooltipConfig from 'zero-tooltip'
|
|
63
|
+
|
|
64
|
+
const tooltipConfig: ZeroTooltipConfig = {
|
|
65
|
+
appendTo: ... ,
|
|
66
|
+
defaultPosition: ... ,
|
|
67
|
+
positions: ... ,
|
|
68
|
+
offsetFromSource: ... ,
|
|
69
|
+
offsetFromViewport: ... ,
|
|
70
|
+
minWidth: ... ,
|
|
71
|
+
maxWidth: ... ,
|
|
72
|
+
tooltipBorderWidth: ... ,
|
|
73
|
+
tooltipClasses: ... ,
|
|
74
|
+
textClasses: ... ,
|
|
75
|
+
arrowSize: ... ,
|
|
76
|
+
arrowClasses: ... ,
|
|
77
|
+
arrowMinOffsetFromTooltipCorner: ... ,
|
|
78
|
+
zIndex: ... ,
|
|
79
|
+
showDelay: ... ,
|
|
80
|
+
hideDelay: ... ,
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
app.use(ZeroTooltip, tooltipConfig)
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
All above settings are optional.
|
|
87
|
+
|
|
88
|
+
Tooltip can be customizable also for each usage (locally) using same config as follows:
|
|
89
|
+
```html
|
|
90
|
+
<template>
|
|
91
|
+
<button v-tooltip:right="tooltipConfig">Submit</button>
|
|
92
|
+
</template>
|
|
93
|
+
|
|
94
|
+
<script setup lang="ts">
|
|
95
|
+
import ZeroTooltipLocalConfig from 'zero-tooltip'
|
|
96
|
+
|
|
97
|
+
const tooltipConfig: ZeroTooltipLocalConfig = reactive({
|
|
98
|
+
content: 'This is tooltip',
|
|
99
|
+
appendTo: ... ,
|
|
100
|
+
defaultPosition: ... ,
|
|
101
|
+
positions: ... ,
|
|
102
|
+
offsetFromSource: ... ,
|
|
103
|
+
offsetFromViewport: ... ,
|
|
104
|
+
minWidth: ... ,
|
|
105
|
+
maxWidth: ... ,
|
|
106
|
+
tooltipBorderWidth: ... ,
|
|
107
|
+
tooltipClasses: ... ,
|
|
108
|
+
textClasses: ... ,
|
|
109
|
+
arrowSize: ... ,
|
|
110
|
+
arrowClasses: ... ,
|
|
111
|
+
arrowMinOffsetFromTooltipCorner: ... ,
|
|
112
|
+
zIndex: ... ,
|
|
113
|
+
show: ... ,
|
|
114
|
+
showDelay: ... ,
|
|
115
|
+
hideDelay: ... ,
|
|
116
|
+
})
|
|
117
|
+
</script>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## ZeroTooltipConfig
|
|
121
|
+
| Property | <div style="width:260px">Default value</div> | Type | Details |
|
|
122
|
+
|---|---|---|---|
|
|
123
|
+
| appendTo | *body* | string | A valid CSS query selector to specify where Tooltip gets appended. |
|
|
124
|
+
| defaultPosition | *top* | TooltipPosition | Position of tooltip component relative to element that is being hovered. |
|
|
125
|
+
| positions | *{ <br>   left: ['left', 'right', 'top', 'bottom'], <br>   top: ['top', 'bottom', 'right', 'left'], <br>   right: ['right', 'left', 'top', 'bottom'], <br>   bottom: ['bottom', 'top', 'right', 'left'], <br> }* | TooltipPositions | Ordered list of fallback positions in case tooltip does not have enough space in default position. If none of given positions will have enough space for tooltip, then it will not be rendered. |
|
|
126
|
+
| offsetFromSource | *10* | number | Tooltip offset in `px` from element that's being hovered *(arrow size is not added to this value)* |
|
|
127
|
+
| offsetFromViewport | *20* | number | Minimal allowed tooltip offset in `px` from viewport sides |
|
|
128
|
+
| minWidth | *100* | number | Minimal tooltip width in `px` that will be allowed to render |
|
|
129
|
+
| maxWidth | *250* | number | Maximal tooltip width in `px` that will be allowed to render |
|
|
130
|
+
| tooltipBorderWidth | *0* | number | Tooltip container border width in `px` |
|
|
131
|
+
| tooltipClasses | *undefined* | string | List of classes that will be added to tooltip element |
|
|
132
|
+
| textClasses | *undefined* | string | List of classes that will be added to text element |
|
|
133
|
+
| arrowSize | *5* | number | Length of arrow hypotenuse in `px` (arrow is generated using border width property, creating square which gets divided in four triangles, thus `arrowSize` is length of square side) |
|
|
134
|
+
| arrowClasses | *undefined* | string | List of classes that will be added to arrow element |
|
|
135
|
+
| arrowMinOffsetFromTooltipCorner | *6* | number | Minimal allowed arrow offset in `px` from tooltip corner. Used in situations when tooltip does not have enough space to be centered relative to element that is being hover, thus arrow is rendered closer to one of the tooltip corners |
|
|
136
|
+
| zIndex | *1* | number | string | `z-index` css property value of tooltip |
|
|
137
|
+
| showDelay | *0* | number | Delay in milliseconds after which to show tooltip while hovering over element |
|
|
138
|
+
| hideDelay | *0* | number | Delay in milliseconds after which to hide tooltip when leaving element boundaries |
|
|
139
|
+
|
|
140
|
+
## ZeroTooltipLocalConfig
|
|
141
|
+
Same as [ZeroTooltipConfig](#ZeroTooltipConfig) with following additions:
|
|
142
|
+
| Property | <div style="width:260px">Default value</div> | Type | Details |
|
|
143
|
+
|---|---|---|---|
|
|
144
|
+
| content | *undefined* | string | ***REQUIRED***. Tooltip text. Text is rendered as HTML, thus it's possible to give simple HTML structure, e.g., `<h1>Tooltip text</h1>` |
|
|
145
|
+
| show | *true* | boolean | Define whether to show or not to show tooltip |
|
|
146
|
+
|
|
147
|
+
## License
|
|
148
|
+
The license is MIT, so any extension, forking is welcome. `zero-tooltip` is designed as fully customizable, zero dependency, simple tooltip for Vue.js.
|