-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6925187
commit 403ba4c
Showing
3 changed files
with
89 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
# @draggable/tooltip | ||
|
||
A smart tooltip library that automatically positions tooltips optimally within the viewport. | ||
|
||
 | ||
|
||
|
||
## Installation | ||
|
||
```bash | ||
npm install @draggable/tooltip | ||
``` | ||
|
||
## Usage | ||
|
||
```javascript | ||
import { Tooltip } from '@draggable/tooltip'; | ||
|
||
// Initialize with default options | ||
const tooltip = new Tooltip(); | ||
|
||
// Or with custom options | ||
const tooltip = new Tooltip({ | ||
triggerName: 'custom-tooltip' | ||
}); | ||
``` | ||
|
||
note: when using umd or iffe, tooltip can be accessed via `window.SmartTooltip` | ||
|
||
```html | ||
|
||
## HTML Usage | ||
|
||
Add tooltips to any element using data attributes: | ||
|
||
```html | ||
<!-- Hover tooltip (default) --> | ||
<div data-tooltip="This is a tooltip">Hover me</div> | ||
|
||
<!-- Click tooltip --> | ||
<button data-tooltip="Click tooltip" data-tooltip-type="click">Click me</button> | ||
``` | ||
|
||
## Options | ||
|
||
| Option | Type | Default | Description | | ||
|--------|------|---------|-------------| | ||
| triggerName | string | 'tooltip' | The name used for the data attribute trigger (e.g., 'tooltip' becomes 'data-tooltip') | | ||
|
||
## Features | ||
|
||
- 🎯 Smart positioning: Automatically finds the best position to display the tooltip | ||
- 🖱️ Multiple trigger types: Support for both hover and click triggers | ||
- 📱 Responsive: Automatically repositions on viewport resize and scroll | ||
- 🎨 Customizable: Easy to style and configure | ||
- 🔄 8-way positioning: top, bottom, left, right, and corner positions | ||
|
||
## Positions | ||
|
||
The tooltip will attempt to position itself in the following order, choosing the first position that fits within the viewport: | ||
- top | ||
- bottom | ||
- left | ||
- right | ||
- top-left | ||
- top-right | ||
- bottom-left | ||
- bottom-right | ||
|
||
## Trigger Types | ||
|
||
### Hover Trigger | ||
```html | ||
<div data-tooltip="Hover tooltip">Hover me</div> | ||
``` | ||
|
||
### Click Trigger | ||
```html | ||
<div data-tooltip="Click tooltip" data-tooltip-type="click">Click me</div> | ||
``` | ||
|
||
## Cleanup | ||
|
||
```javascript | ||
// Remove event listeners and cleanup | ||
tooltip.destroy(); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters