@vue-interface/tooltip 2.0.1 → 2.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 +48 -0
- package/package.json +3 -2
- package/index.ts +0 -8
package/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# Tooltip
|
|
2
|
+
|
|
3
|
+
The `tooltip` component provides flexible tooltips with customizable placement options.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i @vue-interface/tooltip
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
yarn add @vue-interface/tooltip
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm i @vue-interface/tooltip
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
bun i @vue-interface/tooltip
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Basic Usage
|
|
24
|
+
|
|
25
|
+
Tooltips can be positioned at the top, bottom, left, or right of the target element using standard attributes.
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<a href="#" title="Top" data-tooltip-placement="top">Top</a>
|
|
29
|
+
<a href="#" title="Bottom" data-tooltip-placement="bottom">Bottom</a>
|
|
30
|
+
<a href="#" title="Left" data-tooltip-placement="left">Left</a>
|
|
31
|
+
<a href="#" title="Right" data-tooltip-placement="right">Right</a>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Via Directive
|
|
35
|
+
|
|
36
|
+
You can also use the `v-tooltip` directive for a more concise syntax.
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<button
|
|
40
|
+
v-tooltip="{
|
|
41
|
+
title: 'Top',
|
|
42
|
+
placement: 'top'
|
|
43
|
+
}">
|
|
44
|
+
Top
|
|
45
|
+
</button>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
For more comprehensive documentation and examples, please visit the [online documentation](https://vue-interface.github.io/packages/tooltip/).
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/tooltip",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "A Vue tooltip component.",
|
|
5
|
+
"readme": "README.md",
|
|
5
6
|
"type": "module",
|
|
6
7
|
"main": "./dist/tooltip.umd.js",
|
|
7
8
|
"module": "./dist/tooltip.js",
|
|
@@ -46,7 +47,7 @@
|
|
|
46
47
|
"files": [
|
|
47
48
|
"dist",
|
|
48
49
|
"index.css",
|
|
49
|
-
"
|
|
50
|
+
"README.md"
|
|
50
51
|
],
|
|
51
52
|
"publishConfig": {
|
|
52
53
|
"access": "public"
|