@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 optionsconsttooltip=newTooltip();// Or with custom optionsconsttooltip=newTooltip({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) --><divdata-tooltip="This is a tooltip">Hover me</div><!-- Click tooltip --><buttondata-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

<divdata-tooltip="Hover tooltip">Hover me</div>

Click Trigger

<divdata-tooltip="Click tooltip" data-tooltip-type="click">Click me</div>

Cleanup

// Remove event listeners and cleanuptooltip.destroy();