Low-Level API

/**
 * Core Tooltip class for creating and managing individual tooltips
 */
class Tooltip {
  /**
   * Create a new Tooltip instance
   * @param reference - The DOM node used as reference for the tooltip
   * @param options - Configuration options for the tooltip
   */
  constructor(reference: HTMLElement, options: TooltipOptions);
  
  /** Current tooltip state */
  _isOpen: boolean;
  
  /** Reference element */
  reference: HTMLElement;
  
  /** Tooltip configuration options */
  options: TooltipOptions;
  
  /** Popper.js instance for positioning */
  popperInstance: any;
  
  /** CSS classes to apply to tooltip */
  _classes: string | string[];
  
  /** Internal Vue element reference (when used with directive) */
  _vueEl?: HTMLElement;
}

interface TooltipOptions {
  /** Tooltip placement */
  placement?: string;
  
  /** Container element */
  container?: string | HTMLElement | false;
  
  /** Show/Hide delay */
  delay?: number | DelayConfig;
  
  /** Allow HTML content */
  html?: boolean;
  
  /** Tooltip content */
  title?: string | (() => string) | (() => Promise<string>);
  
  /** HTML template */
  template?: string;
  
  /** Trigger events */
  trigger?: string;
  
  /** Position offset */
  offset?: number | string;
  
  /** Boundaries element */
  boundariesElement?: string | HTMLElement;
  
  /** Popper.js options */
  popperOptions?: any;
  
  /** Arrow selector */
  arrowSelector?: string;
  
  /** Inner content selector */
  innerSelector?: string;
  
  /** Auto-hide on hover */
  autoHide?: boolean;
  
  /** Hide on target click */
  hideOnTargetClick?: boolean;
  
  /** Loading CSS class */
  loadingClass?: string;
  
  /** Loading content */
  loadingContent?: string;
  
  /** Accessibility aria ID */
  ariaId?: string;
}

import { Tooltip } from 'v-tooltip';

// Create tooltip manually
const button = document.getElementById('my-button');
const tooltip = new Tooltip(button, {
  title: 'Manual tooltip',
  placement: 'top',
  trigger: 'hover',
  html: false
});

// Show/hide manually
tooltip.show();
setTimeout(() => tooltip.hide(), 2000);

// Clean up
tooltip.dispose();

interface TooltipMethods {
  /**
   * Show the tooltip
   * Reveals an element's tooltip. This is considered a "manual" triggering.
   * Tooltips with zero-length titles are never displayed.
   */
  show(): void;
  
  /**
   * Hide the tooltip
   * Hides an element's tooltip. This is considered a "manual" triggering.
   */
  hide(): void;
  
  /**
   * Toggle tooltip visibility
   * Toggles an element's tooltip. This is considered a "manual" triggering.
   */
  toggle(): void;
  
  /**
   * Dispose and destroy the tooltip
   * Hides and destroys an element's tooltip, cleaning up all resources.
   */
  dispose(): void;
  
  /**
   * Set tooltip CSS classes
   * @param classes - CSS classes to apply to tooltip
   */
  setClasses(classes: string | string[]): void;
  
  /**
   * Update tooltip content
   * @param content - New content for the tooltip
   */
  setContent(content: string | (() => string) | (() => Promise<string>)): void;
  
  /**
   * Update tooltip options
   * @param options - New options to merge with existing configuration
   */
  setOptions(options: Partial<TooltipOptions>): void;
}

import { Tooltip } from 'v-tooltip';

const element = document.querySelector('.my-element');
const tooltip = new Tooltip(element, {
  title: 'Initial content',
  placement: 'top'
});

// Method usage
tooltip.show();                          // Show tooltip
tooltip.hide();                          // Hide tooltip
tooltip.toggle();                        // Toggle visibility

tooltip.setContent('New content');       // Update content
tooltip.setClasses(['custom', 'theme']); // Update styling

// Update configuration
tooltip.setOptions({
  placement: 'bottom',
  delay: { show: 200, hide: 100 },
  html: true
});

// Cleanup
tooltip.dispose();

/**
 * Create a tooltip on an element using directive-style configuration
 * @param el - Target HTML element
 * @param value - Tooltip configuration (string, object, or function)
 * @param modifiers - Directive modifiers for placement
 * @returns Tooltip instance attached to element
 */
function createTooltip(
  el: HTMLElement, 
  value: string | TooltipConfig | (() => string), 
  modifiers?: DirectiveModifiers
): Tooltip;

/**
 * Destroy tooltip on an element
 * @param el - Target HTML element with attached tooltip
 */
function destroyTooltip(el: HTMLElement): void;

interface DirectiveModifiers {
  [placement: string]: boolean;
}

interface TooltipConfig {
  content: string | (() => string) | (() => Promise<string>);
  classes?: string | string[];
  targetClasses?: string | string[];
  html?: boolean;
  delay?: number | DelayConfig;
  placement?: string;
  trigger?: string;
  show?: boolean;
  offset?: number | string;
  container?: string | HTMLElement | false;
  boundariesElement?: string | HTMLElement;
  template?: string;
  arrowSelector?: string;
  innerSelector?: string;
  autoHide?: boolean;
  hideOnTargetClick?: boolean;
  loadingClass?: string;
  loadingContent?: string;
  popperOptions?: any;
}

import { createTooltip, destroyTooltip } from 'v-tooltip';

const element = document.querySelector('.tooltip-target');

// Create simple tooltip
const tooltip = createTooltip(element, 'Simple tooltip');

// Create with modifiers (like v-tooltip.bottom)
const tooltipWithPlacement = createTooltip(
  element, 
  'Bottom tooltip', 
  { bottom: true }
);

// Create with full configuration
const configuredTooltip = createTooltip(element, {
  content: 'Advanced tooltip',
  placement: 'right',
  delay: { show: 300, hide: 100 },
  classes: ['custom-tooltip'],
  html: true
});

// Create with async content
const asyncTooltip = createTooltip(element, {
  content: async () => {
    const response = await fetch('/api/tooltip-content');
    return response.text();
  },
  loadingContent: 'Loading...',
  loadingClass: 'tooltip-loading'
});

// Cleanup
destroyTooltip(element);

/**
 * Process and normalize tooltip options
 * @param options - Raw options object
 * @returns Processed options with defaults applied
 */
function getOptions(options: any): ProcessedTooltipOptions;

/**
 * Determine tooltip placement from directive value and modifiers
 * @param value - Directive value object
 * @param modifiers - Directive modifiers object
 * @returns Placement string
 */
function getPlacement(value: any, modifiers: DirectiveModifiers): string;

/**
 * Extract content from various directive value formats
 * @param value - Directive value (string, object, or function)
 * @returns Content string or false if no content
 */
function getContent(value: any): string | false;

interface ProcessedTooltipOptions extends TooltipOptions {
  // All options with defaults applied
  placement: string;
  delay: number | DelayConfig;
  html: boolean;
  template: string;
  arrowSelector: string;
  innerSelector: string;
  trigger: string;
  offset: number | string;
  container: string | HTMLElement | false;
  autoHide: boolean;
  hideOnTargetClick: boolean;
  loadingClass: string;
  loadingContent: string;
  popperOptions: any;
}

// These are internal functions - not directly importable
// Shown for reference only:

// Process options
const rawOptions = { content: 'Hello', delay: 200 };
const processedOptions = getOptions(rawOptions);
console.log(processedOptions.placement); // 'top' (default)

// Get placement from modifiers
const modifiers = { bottom: true, start: true };
const placement = getPlacement({}, modifiers);
console.log(placement); // 'bottom-start'

// Extract content
const stringContent = getContent('Hello World');
console.log(stringContent); // 'Hello World'

const objectContent = getContent({ content: 'Object content' });
console.log(objectContent); // 'Object content'

const noContent = getContent({});
console.log(noContent); // false

/**
 * Add CSS classes to an element (IE-compatible)
 * @param el - Target DOM element
 * @param classes - Space-separated class names or array
 */
function addClasses(el: HTMLElement, classes: string | string[]): void;

/**
 * Remove CSS classes from an element (IE-compatible)
 * @param el - Target DOM element
 * @param classes - Space-separated class names or array
 */
function removeClasses(el: HTMLElement, classes: string | string[]): void;

/**
 * Convert string to array format
 * @param value - String with space-separated values or array
 * @returns Array of individual values
 */
function convertToArray(value: string | string[]): string[];

/** Whether passive event listeners are supported */
const supportsPassive: boolean;

// These are internal utilities - not directly importable
// Shown for reference only:

const element = document.querySelector('.my-element');

// Class management
addClasses(element, 'tooltip-target active');
addClasses(element, ['theme-dark', 'size-large']);

removeClasses(element, 'active');
removeClasses(element, ['theme-dark', 'size-large']);

// Array conversion
const classArray = convertToArray('class1 class2 class3');
console.log(classArray); // ['class1', 'class2', 'class3']

// Feature detection
if (supportsPassive) {
  element.addEventListener('touchstart', handler, { passive: true });
} else {
  element.addEventListener('touchstart', handler, false);
}

/**
 * Global state object
 */
interface TooltipState {
  /** Whether tooltips are globally enabled */
  enabled: boolean;
}

/**
 * Global state instance
 */
const state: TooltipState;

/**
 * Default options object (can be modified)
 */
const defaultOptions: GlobalVTooltipOptions;

// Access global state through the plugin
VTooltip.enabled = window.innerWidth > 768;

// Access options through the plugin interface
console.log(VTooltip.options.defaultPlacement); // 'top'

// Modify defaults (affects all new tooltips)
VTooltip.options.defaultClass = 'custom-theme';
VTooltip.options.defaultDelay = 300;

/**
 * Vue directive object for manual registration
 */
const directive: VueDirective;

/**
 * Plugin object with install method
 */
const plugin: VuePlugin;

interface VueDirective {
  bind(el: HTMLElement, binding: DirectiveBinding): void;
  update(el: HTMLElement, binding: DirectiveBinding): void;
  unbind(el: HTMLElement): void;
  options: GlobalVTooltipOptions;
}

interface VuePlugin {
  install(Vue: any, options?: Partial<GlobalVTooltipOptions>): void;
  enabled: boolean;
  options: GlobalVTooltipOptions;
}

interface DirectiveBinding {
  value: any;
  oldValue: any;
  modifiers: { [key: string]: boolean };
}

import { directive, plugin } from 'v-tooltip';

// Manual directive registration
Vue.directive('custom-tooltip', directive);

// Access directive options
console.log(directive.options.defaultClass);

// Plugin properties
console.log(plugin.enabled); // Global enabled state
plugin.enabled = false; // Disable all tooltips

// Custom directive implementation
const customDirective = {
  bind(el, binding) {
    // Custom bind logic
    directive.bind(el, binding);
  },
  update(el, binding) {
    // Custom update logic
    directive.update(el, binding);
  },
  unbind(el) {
    // Custom cleanup
    directive.unbind(el);
  }
};

Vue.directive('my-tooltip', customDirective);

/**
 * Browser environment detection
 */
const isIOS: boolean;

/**
 * SVG element support
 */
const SVGAnimatedString: any;

/**
 * Element constructor (browser-safe)
 */
const Element: any;

// These are internal utilities - not directly importable
// Shown for reference only:

// iOS-specific handling
if (isIOS) {
  // Special touch handling for iOS
  console.log('Running on iOS device');
}

// SVG element support
function isSVGElement(el) {
  return el instanceof SVGElement;
}

// Safe element type checking
function isElement(obj) {
  return obj instanceof Element;
}