description: Zero-dependency floating element positioning for tooltips, dropdowns, menus, and popovers. package: floatit category: ui-positioning keywords: [floating-ui, tooltip, popover, dropdown, positioning, middleware, placement] related: [craftit, buildit, dragit] exports: [float, computePosition, autoUpdate, offset, flip, shift, arrow, size]

@vielzeug/floatit

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

Package: @vielzeug/floatit  ·  Category: Ui-positioning

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

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

Related: @vielzeug/craftit · @vielzeug/buildit · @vielzeug/dragit

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

Installation

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

Quick Start

import { arrow, autoUpdate, computePosition, flip, offset, shift } 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();

Documentation

• Overview
• Usage Guide
• API Reference
• Examples

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.