Floatit

⚡ Quick Reference

Package: @vielzeug/floatit  ·  Category: Ui Positioning

Key exports: float, computePosition, autoUpdate, offset, flip, shift, arrow, size

When to use: Precise floating element positioning for tooltips, dropdowns, menus, and popovers with middleware pipeline.

Related: Craftit · Buildit · Dragit

@vielzeug/floatit is a small DOM positioning engine for floating UI. It provides a direct API for computing positions, a high-level follow API, and middleware for collision handling, arrows, hiding, inline text anchors, and dynamic sizing.

Installation

pnpm

pnpm add @vielzeug/floatit

npm

npm install @vielzeug/floatit

yarn

yarn add @vielzeug/floatit

Quick Start

import { arrow, autoUpdate, flip, offset, shift, computePosition } from '@vielzeug/floatit';

const reference = document.querySelector<HTMLElement>('#trigger')!;
const floating = document.querySelector<HTMLElement>('#tooltip')!;
const arrowEl = floating.querySelector<HTMLElement>('.arrow')!;

const cleanup = autoUpdate(reference, floating, () => {
  const result = computePosition(reference, floating, {
    placement: 'top',
    middleware: [offset(8), flip(), shift({ padding: 6 }), arrow({ element: arrowEl, padding: 6 })],
  });

  floating.style.left = `${result.x}px`;
  floating.style.top = `${result.y}px`;
  floating.dataset.placement = result.placement;
});

cleanup();

Why Floatit?

Positioning floating UI by hand quickly turns into repeated math for viewport boundaries, arrow offsets, and scroll/resize tracking.

Feature	Floatit	Floating UI	Popper
Bundle size	2.6 KB	~10 kB	~6 kB
Middleware pipeline	✅	✅	✅
Direct compute API	✅	✅	✅
High-level follow API	✅	✅	Partial
Inline anchor middleware	✅	✅	❌
Auto-update helpers	✅	✅	✅
Framework agnostic	✅	✅	✅
Zero dependencies	✅	✅	✅

Use Floatit when you want a lightweight, DOM-first positioning engine with direct control and no framework adapter requirements.

Consider larger alternatives when you need their existing integration ecosystem or migration compatibility.

Features

• computePosition() returns x, y, placement, and middlewareData
• float() covers the common position-and-follow case and applies left/top by default
• detectOverflow() powers both built-in and custom overflow middleware
• Built-in middleware: offset, flip, autoPlacement, shift, size, arrow, hide, and inline
• Per-side padding support across overflow-aware middleware
• autoUpdate() supports scroll, resize, ResizeObserver, visualViewport, and animation-frame tracking
• Zero dependencies

Compatibility

Environment	Support
Browser	✅
Node.js	❌
SSR	❌
Deno	❌

Documentation

• Usage Guide
• API Reference
• Examples

See Also

• Buildit
• Dragit
• Craftit