MODRACX

← Archive & Insights

Zero-Dependency Tooltip Positioning: Building tooltip-js for Fast Web Apps

Pulling heavy positioning engines like Popper.js or Tippy.js into lightweight web apps adds 20KB+ to JavaScript bundle sizes. I created tooltip-js as a sub-2KB, zero-dependency tooltip positioning engine with automatic viewport edge detection, smart flipping, and accessible focus triggers.

By Kenneth D'Silva • Reading Time: 11 min read • Category: UX & Design

1. The Lightweight Tooltip Challenge

Tooltips seem trivial until an interactive trigger sits near the right screen edge or top header boundary. Without collision detection, static CSS tooltips render off-screen or create unwanted horizontal scrollbars.

Heavy libraries solve this by bundling full 3D matrix math and mutation observers. I engineered `tooltip-js` (`src/position.js`) with lightweight bounding-box collision detection (`overflowOf`) that flips tooltips to their opposite side (`top <-> bottom`, `left <-> right`) when bounds are exceeded.

2. Key Features

  • Sub-2KB Footprint: Zero external dependencies, clean ES module output.
  • Viewport Collision Flipping & Shifting: Keeps tooltips visible inside container boundaries automatically.
  • ARIA Accessible Triggers: Connects `aria-describedby` dynamically on hover and keyboard focus (`Tab`).
  • Declarative HTML API: Supports `data-tooltip="Text"` auto-initialization across entire document DOM trees.

3. Open Source Repository

Check out tooltip-js on GitHub: github.com/Modracx/tooltip-js.

Suggested & Related Reading