svelte-floating-ui

• Purpose: Svelte Floating UI is a Svelte integration for [Floating UI](https://floating-ui.com/ ), providing actions (not wrapper components) to create floating elements like tooltips, popovers, and dropdowns. It leverages Svelte's use_action for direct DOM manipulation.

• Target Audience: Svelte developers who need lightweight, framework-agnostic floating element positioning with middleware support (e.g., offset, flip, shift, arrow).

• Key Features:

  • Actions-based API: Uses createFloatingActions to bind reference and floating elements.
  • Dynamic Options: Supports static or dynamic configuration for positioning (e.g., placement, middleware).
  • Manual Updates: Exposes an update method to recompute positions programmatically.
  • Auto-Update: Configurable auto-updating for ancestor/element resize or scroll events.
  • Virtual Elements: Allows positioning relative to non-DOM elements (e.g., mouse cursor via createVirtualElement).
  • Arrow Middleware: Includes a custom arrow middleware with style helpers (createArrowRef).
  • Custom Styles: Supports onComputed callback for manual style adjustments post-calculation.

• Svelte Support: Primarily designed for Svelte, with direct Svelte action integration. No framework-agnostic usage mentioned.

• Example Use Case:

  const [ref, content] = createFloatingActions({
    placement: "top",
    middleware: [offset(6), flip()]
  });
  

  Used with Svelte's use: directive for tooltips, dropdowns, etc.

• Middleware: Supports Floating UI's built-in middleware (imported from svelte-floating-ui/dom).

• Credit: Built on [TehNut/svelte-floating-ui](https://github.com/TehNut/svelte-floating-ui ).