svelte-use-tooltip

• Purpose: A Svelte action to display customizable tooltips with support for interactive content and animations.
• Key Features:
  • Supports text content or complex HTML content via selectors (e.g., templates).
  • Configurable positioning (top, bottom, left, right).
  • Animated transitions with customizable class names.
  • Interactive tooltip content with event handling (click, mouseenter, etc.).
  • Callbacks for tooltip appearance/disappearance (onEnter, onLeave).
  • Delays for showing/hiding (enterDelay, leaveDelay).
• Target Audience: Svelte developers needing flexible, interactive tooltips with rich content support.
• Demo: LIVE DEMO

API Highlights:

• Content Options:
  • content: Plain text for simple tooltips.
  • contentSelector: Selector for complex HTML content (e.g., templates).
• Interactivity:
  • contentActions: Define event handlers for elements inside the tooltip (supports * for global events).
  • Supports closing the tooltip on callback (closeOnCallback).
• Styling/Animation:
  • Custom class names for tooltip container and animations.
  • Offset control for tooltip positioning.

Example Use Case:

<div 
  use:useTooltip={{
    contentSelector: '#tooltip-template',
    position: 'right',
    animated: true,
    contentActions: {
      '*': { eventType: 'click', callback: () => console.log('Clicked!') }
    }
  }}
>
  Hover me
</div>

For more details, refer to the demo or the full API table above.