@draggable/tooltip
A smart tooltip library that automatically positions tooltips optimally within the viewport.
Installation
npm install @draggable/tooltip
Usage
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 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
<div data-tooltip="Hover tooltip">Hover me</div>
Click Trigger
<div data-tooltip="Click tooltip" data-tooltip-type="click">Click me</div>
Cleanup
// Remove event listeners and cleanup
tooltip.destroy();