@vielzeug/orbit

Zero-dependency floating element positioning for tooltips, dropdowns, menus, and popovers.

Package: @vielzeug/orbit  ·  Category: UI Positioning

Key exports: float, computePosition, getRects, detectOverflow, autoUpdate, offset, flip, shift, autoPlacement, arrow, size, hide, compose, limitShift, getSide, getAlignment

When to use: Zero-dependency floating element positioning for tooltips, dropdowns, menus, and popovers.

Related: @vielzeug/ore · @vielzeug/refine · @vielzeug/dnd

@vielzeug/orbit is part of Vielzeug and ships as a zero-dependency TypeScript package with ESM+CJS output.

Installation

pnpm add @vielzeug/orbit
npm install @vielzeug/orbit
yarn add @vielzeug/orbit

Quick Start

import { arrow, float, flip, offset, shift } from '@vielzeug/orbit';

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

const handle = float(reference, floating, {
  placement: 'top',
  middleware: [offset(8), flip(), shift({ padding: 6 }), arrow({ element: arrowEl, padding: 6 })],
  apply(result) {
    floating.style.left = `${result.x}px`;
    floating.style.top = `${result.y}px`;

    if (result.middlewareData.arrow) {
      const { x, y } = result.middlewareData.arrow;
      arrowEl.style.left = x != null ? `${x}px` : '';
      arrowEl.style.top = y != null ? `${y}px` : '';
    }
  },
});

// On teardown:
handle.dispose();

Sub-paths

| Import | Purpose | | -------------------------- | ------------------------------------------------------------ | | @vielzeug/orbit | Core API, middleware (inline included), utilities, types | | @vielzeug/orbit/presets | Pre-configured middleware stacks | | @vielzeug/orbit/reactive | Reactive signal adapter (@vielzeug/ripple) | | @vielzeug/orbit/devtools | Visual debug overlay (development only) | | @vielzeug/orbit/ssr | No-op stubs for server-side rendering |

Documentation

• Overview
• Usage Guide
• API Reference
• Examples

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.