Skip to content

Commit 403ba4c

Browse files
committed
fix: readme missing important info
1 parent 6925187 commit 403ba4c

File tree

3 files changed

+89
-4
lines changed

3 files changed

+89
-4
lines changed

README.md

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# @draggable/tooltip
2+
3+
A smart tooltip library that automatically positions tooltips optimally within the viewport.
4+
5+
![draggable-tooltip](https://github.com/user-attachments/assets/33b20fa6-f9ee-456d-8793-f26b03aaeb75)
6+
7+
8+
## Installation
9+
10+
```bash
11+
npm install @draggable/tooltip
12+
```
13+
14+
## Usage
15+
16+
```javascript
17+
import { Tooltip } from '@draggable/tooltip';
18+
19+
// Initialize with default options
20+
const tooltip = new Tooltip();
21+
22+
// Or with custom options
23+
const tooltip = new Tooltip({
24+
triggerName: 'custom-tooltip'
25+
});
26+
```
27+
28+
note: when using umd or iffe, tooltip can be accessed via `window.SmartTooltip`
29+
30+
```html
31+
32+
## HTML Usage
33+
34+
Add tooltips to any element using data attributes:
35+
36+
```html
37+
<!-- Hover tooltip (default) -->
38+
<div data-tooltip="This is a tooltip">Hover me</div>
39+
40+
<!-- Click tooltip -->
41+
<button data-tooltip="Click tooltip" data-tooltip-type="click">Click me</button>
42+
```
43+
44+
## Options
45+
46+
| Option | Type | Default | Description |
47+
|--------|------|---------|-------------|
48+
| triggerName | string | 'tooltip' | The name used for the data attribute trigger (e.g., 'tooltip' becomes 'data-tooltip') |
49+
50+
## Features
51+
52+
- 🎯 Smart positioning: Automatically finds the best position to display the tooltip
53+
- 🖱️ Multiple trigger types: Support for both hover and click triggers
54+
- 📱 Responsive: Automatically repositions on viewport resize and scroll
55+
- 🎨 Customizable: Easy to style and configure
56+
- 🔄 8-way positioning: top, bottom, left, right, and corner positions
57+
58+
## Positions
59+
60+
The tooltip will attempt to position itself in the following order, choosing the first position that fits within the viewport:
61+
- top
62+
- bottom
63+
- left
64+
- right
65+
- top-left
66+
- top-right
67+
- bottom-left
68+
- bottom-right
69+
70+
## Trigger Types
71+
72+
### Hover Trigger
73+
```html
74+
<div data-tooltip="Hover tooltip">Hover me</div>
75+
```
76+
77+
### Click Trigger
78+
```html
79+
<div data-tooltip="Click tooltip" data-tooltip-type="click">Click me</div>
80+
```
81+
82+
## Cleanup
83+
84+
```javascript
85+
// Remove event listeners and cleanup
86+
tooltip.destroy();
87+
```

src/js/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,8 @@ export class SmartTooltip {
253253
}
254254
}
255255

256+
export const Tooltip = SmartTooltip
257+
256258
declare global {
257259
interface Window {
258260
SmartTooltip: typeof SmartTooltip

vite.config.dev.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { defineConfig } from 'vite'
22
import type { UserConfigExport } from 'vite'
33
import { resolve } from 'node:path'
44
import { createHtmlPlugin } from 'vite-plugin-html'
5-
import { patchCssModules } from 'vite-css-modules'
65
import { isProduction, pkgName, shortName, version } from './env.ts'
76

87
const config: UserConfigExport = defineConfig({
@@ -48,9 +47,6 @@ const config: UserConfigExport = defineConfig({
4847
},
4948
},
5049
}),
51-
// patchCssModules({
52-
// generateSourceTypes: true,
53-
// }),
5450
],
5551
resolve: {
5652
alias: {

0 commit comments

Comments
 (0)