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();