@vingy/vueltip 0.2.0 → 0.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 +128 -0
- package/dist/index.d.mts +4 -2
- package/dist/index.mjs +7 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# Vueltip
|
|
2
|
+
|
|
3
|
+
A headless tooltip component for Vue.js.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Dynamic Visibility**: The tooltip does not display when the tooltip text is identical to the element's content, unless the content is truncated.
|
|
8
|
+
- **Single Tooltip Instance**: A single tooltip is used, which is repositioned within the window as needed.
|
|
9
|
+
- **Headless Design**: Fully customizable; bring your own component(s) for rendering.
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
To install Vueltip, use npm or yarn:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add vueltip
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Register the tooltip in your app:
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import Vueltip from 'vueltip'
|
|
23
|
+
|
|
24
|
+
createApp(App).use(Vueltip)
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
### 1. Create a Tooltip Component
|
|
30
|
+
|
|
31
|
+
First, create a tooltip component using the \`useTooltip\` composable:
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
<!-- Tooltip.vue -->
|
|
35
|
+
<template>
|
|
36
|
+
<div
|
|
37
|
+
ref="tooltipElement"
|
|
38
|
+
v-show="show"
|
|
39
|
+
:style="tooltipStyles"
|
|
40
|
+
class="tooltip"
|
|
41
|
+
>
|
|
42
|
+
{{ content }}
|
|
43
|
+
<div
|
|
44
|
+
ref="arrowElement"
|
|
45
|
+
:style="arrowStyles"
|
|
46
|
+
class="tooltip-arrow"
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
50
|
+
|
|
51
|
+
<script setup>
|
|
52
|
+
import { ref } from 'vue'
|
|
53
|
+
import { useTooltip } from 'vueltip'
|
|
54
|
+
|
|
55
|
+
const tooltipElement = ref()
|
|
56
|
+
const arrowElement = ref()
|
|
57
|
+
|
|
58
|
+
const { tooltipStyles, arrowStyles, show, content } =
|
|
59
|
+
useTooltip({
|
|
60
|
+
tooltipElement,
|
|
61
|
+
arrowElement,
|
|
62
|
+
offset: 8,
|
|
63
|
+
padding: 8,
|
|
64
|
+
arrowSize: 10,
|
|
65
|
+
})
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<style scoped>
|
|
69
|
+
.tooltip {
|
|
70
|
+
background: #333;
|
|
71
|
+
color: white;
|
|
72
|
+
padding: 8px 12px;
|
|
73
|
+
border-radius: 4px;
|
|
74
|
+
font-size: 14px;
|
|
75
|
+
z-index: 9999;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.tooltip-arrow {
|
|
79
|
+
background: #333;
|
|
80
|
+
}
|
|
81
|
+
</style>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### 2. Register in Your App
|
|
85
|
+
|
|
86
|
+
Import and register the tooltip component and plugin in your app's entry point:
|
|
87
|
+
|
|
88
|
+
```ts
|
|
89
|
+
// main.ts
|
|
90
|
+
import { createApp } from 'vue'
|
|
91
|
+
import App from './App.vue'
|
|
92
|
+
import Vueltip from 'vueltip'
|
|
93
|
+
import Tooltip from './components/Tooltip.vue'
|
|
94
|
+
|
|
95
|
+
const app = createApp(App)
|
|
96
|
+
|
|
97
|
+
app.use(Vueltip, {
|
|
98
|
+
component: Tooltip,
|
|
99
|
+
})
|
|
100
|
+
|
|
101
|
+
app.mount('#app')
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### 3. Use the Directive
|
|
105
|
+
|
|
106
|
+
Now you can use the `v-tooltip` directive on any element:
|
|
107
|
+
|
|
108
|
+
```ts
|
|
109
|
+
<template>
|
|
110
|
+
<div>
|
|
111
|
+
<button v-tooltip="{ text: 'Click me to submit' }">
|
|
112
|
+
Submit
|
|
113
|
+
</button>
|
|
114
|
+
|
|
115
|
+
<input
|
|
116
|
+
v-tooltip="{ text: 'Enter your email address' }"
|
|
117
|
+
type="email"
|
|
118
|
+
placeholder="Email"
|
|
119
|
+
/>
|
|
120
|
+
|
|
121
|
+
<span v-tooltip="{ text: 'This is a helpful tooltip' }">
|
|
122
|
+
Hover over me
|
|
123
|
+
</span>
|
|
124
|
+
</div>
|
|
125
|
+
</template>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
See the demo app in [demo/](../../demo/).
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { n as __reExport, t as __exportAll } from "./chunk-CtajNgzt.mjs";
|
|
2
2
|
import * as Vue from "vue";
|
|
3
|
-
import { ShallowRef, StyleValue } from "vue";
|
|
3
|
+
import { App, Component, ShallowRef, StyleValue } from "vue";
|
|
4
4
|
|
|
5
5
|
//#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.d.mts
|
|
6
6
|
declare type AlignedPlacement = `${Side}-${Alignment}`;
|
|
@@ -293,7 +293,9 @@ declare const useTooltip: ({
|
|
|
293
293
|
//#endregion
|
|
294
294
|
//#region src/plugin.d.ts
|
|
295
295
|
declare const tooltipPlugin: {
|
|
296
|
-
install: (app:
|
|
296
|
+
install: (app: App, options: Partial<Options> & {
|
|
297
|
+
component: Component;
|
|
298
|
+
}) => void;
|
|
297
299
|
};
|
|
298
300
|
//#endregion
|
|
299
301
|
export { type Content, tooltipPlugin, useTooltip };
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { n as __reExport, t as __exportAll } from "./chunk-CtajNgzt.mjs";
|
|
2
2
|
import * as Vue from "vue";
|
|
3
|
-
import { computed, onMounted, ref, watch } from "vue";
|
|
3
|
+
import { computed, createApp, onMounted, ref, watch } from "vue";
|
|
4
4
|
|
|
5
5
|
//#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
|
|
6
6
|
const min = Math.min;
|
|
@@ -1575,6 +1575,12 @@ const tooltipDirective = {
|
|
|
1575
1575
|
const tooltipPlugin = { install: (app, options) => {
|
|
1576
1576
|
setOptions(options);
|
|
1577
1577
|
app.directive("tooltip", tooltipDirective);
|
|
1578
|
+
const container = document.createElement("div");
|
|
1579
|
+
container.id = "__vueltip_root__";
|
|
1580
|
+
document.body.appendChild(container);
|
|
1581
|
+
const tooltipApp = createApp(options.component);
|
|
1582
|
+
tooltipApp._context = app._context;
|
|
1583
|
+
tooltipApp.mount(container);
|
|
1578
1584
|
} };
|
|
1579
1585
|
|
|
1580
1586
|
//#endregion
|