# Tooltip Component Demo

## Basic Usage

The tooltip component has two main configurable options:

- Text: The content to display in the tooltip
- Position: Where the tooltip appears relative to the element (left, right, top, bottom, auto)

// Initialize tooltip system const tooltip = new Tooltip(); // Add tooltip to an element tooltip.add(element, "Your tooltip text here", "left"); // Or let it auto-detect the best position tooltip.add(element, "Auto-positioned tooltip", "auto");

## Position Examples

## Smart Positioning

The tooltip automatically adjusts its position when it would go off-screen:

## Dynamic Content

You can update tooltip text dynamically:

// Update tooltip text tooltip.update(element, "New tooltip text"); // Remove tooltip tooltip.remove(element);

## API Reference

// Create tooltip instance const tooltip = new Tooltip(); // Add tooltip with text and position tooltip.add(element, text, position); // - element: HTMLElement to attach tooltip to // - text: String content for the tooltip // - position: 'left'|'right'|'top'|'bottom'|'auto' // Update tooltip text tooltip.update(element, newText); // Remove tooltip from element tooltip.remove(element); // Clean up (removes all event listeners and DOM elements) tooltip.destroy();