zero-tooltip 1.0.1 → 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/README.md +41 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -53,9 +53,11 @@ app.directive('tooltip', ZeroTooltip({
|
|
|
53
53
|
}))
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
-
Tooltip component is fully customizable by giving config object:
|
|
56
|
+
Tooltip component is fully customizable by giving config object when declaring global tooltip directive:
|
|
57
57
|
```ts
|
|
58
|
-
|
|
58
|
+
import ZeroTooltipConfig from 'zero-tooltip'
|
|
59
|
+
|
|
60
|
+
const tooltipConfig: ZeroTooltipConfig = {
|
|
59
61
|
defaultPosition: ... ,
|
|
60
62
|
positions: ... ,
|
|
61
63
|
offsetFromSource: ... ,
|
|
@@ -68,12 +70,41 @@ app.directive('tooltip', ZeroTooltip({
|
|
|
68
70
|
arrowSize: ... ,
|
|
69
71
|
arrowClasses: ... ,
|
|
70
72
|
arrowMinOffsetFromTooltipCorner: ... ,
|
|
71
|
-
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
app.directive('tooltip', ZeroTooltip(tooltipConfig))
|
|
72
76
|
```
|
|
73
77
|
|
|
74
78
|
All above settings are optional.
|
|
75
79
|
|
|
76
|
-
|
|
80
|
+
Tooltip can be customizable also for each usage (locally) using same config as follows:
|
|
81
|
+
```html
|
|
82
|
+
<template>
|
|
83
|
+
<button v-tooltip:right="tooltipConfig">Submit</button>
|
|
84
|
+
</template>
|
|
85
|
+
|
|
86
|
+
<script setup lang="ts">
|
|
87
|
+
import ZeroTooltipLocalConfig from 'zero-tooltip'
|
|
88
|
+
|
|
89
|
+
const tooltipConfig: ZeroTooltipLocalConfig = {
|
|
90
|
+
content: 'This is tooltip'
|
|
91
|
+
defaultPosition: ... ,
|
|
92
|
+
positions: ... ,
|
|
93
|
+
offsetFromSource: ... ,
|
|
94
|
+
offsetFromViewport: ... ,
|
|
95
|
+
minWidth: ... ,
|
|
96
|
+
maxWidth: ... ,
|
|
97
|
+
tooltipBorderWidth: ... ,
|
|
98
|
+
tooltipClasses: ... ,
|
|
99
|
+
textClasses: ... ,
|
|
100
|
+
arrowSize: ... ,
|
|
101
|
+
arrowClasses: ... ,
|
|
102
|
+
arrowMinOffsetFromTooltipCorner: ... ,
|
|
103
|
+
}
|
|
104
|
+
</script>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## ZeroTooltipConfig
|
|
77
108
|
| Property | <div style="width:260px">Default value</div> | Type | Details |
|
|
78
109
|
|---|---|---|---|
|
|
79
110
|
| defaultPosition | *top* | TooltipPosition | Postion of tooltip component relative to element that is being hovered |
|
|
@@ -89,5 +120,11 @@ All above settings are optional.
|
|
|
89
120
|
| arrowClasses | *undefined* | string | List of classes that will be added to arrow element |
|
|
90
121
|
| 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 |
|
|
91
122
|
|
|
123
|
+
## ZeroTooltipLocalConfig
|
|
124
|
+
Same as [ZeroTooltipConfig](#ZeroTooltipConfig) with following additions:
|
|
125
|
+
| Property | <div style="width:260px">Default value</div> | Type | Details |
|
|
126
|
+
|---|---|---|---|
|
|
127
|
+
| 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>` |
|
|
128
|
+
|
|
92
129
|
## Licence
|
|
93
130
|
The licence is MIT, so any extension, forking is welcome. `zero-tooltip` is designed as fully customizable, zero dependency, simple tooltip for Vue.js.
|