Tippy.js

Tippy.js is a lightweight, highly configurable JavaScript library for creating tooltips, popovers, dropdowns, and menus. Built on top of Popper, it handles the hard parts of overlay positioning, collision detection, and lifecycle management so you can attach rich, accessible floating UI to any element with a single function call.

Framework-agnostic and dependency-light, Tippy.js works with vanilla JavaScript or any framework, ships with polished default themes and animations, and exposes a plugin system for advanced behaviors like follow-cursor, sticky positioning, and singleton grouping.

What You Get

• A single tippy() constructor that attaches tooltips, popovers, dropdowns, or menus to one or many elements at once
• Popper-powered smart positioning with automatic flipping and collision avoidance
• Prebuilt themes, animations, and CSS you can import and customize
• A plugin architecture for follow-cursor, sticky, inline positioning, and animated fill behaviors
• TypeScript type definitions and accessible defaults (ARIA attributes, keyboard and focus handling)

Common Use Cases

• Adding descriptive tooltips to buttons, icons, and form fields
• Building interactive popovers and dropdown menus triggered by click or hover
• Creating context menus and rich HTML overlays anchored to page elements
• Grouping many tooltips into a shared singleton for coordinated show/hide behavior

Under The Hood

Architecture — The public entry point in src/index.ts exposes a tippy() function that normalizes targets via getArrayOfElements, merges passed props with defaultProps, and delegates each element to createTippy (src/createTippy.ts, ~1145 lines) which is the core engine. createTippy builds the popper DOM through template.ts, wires per-instance state and lifecycle hooks, binds trigger listeners, and instantiates a Popper instance (@popperjs/core) to compute placement. Global listeners are set up once through bindGlobalEventListeners.ts, and add-ons (createSingleton, delegate) plus plugins (animateFill, followCursor, inlinePositioning, sticky) layer optional behavior over the base instance.

Tech Stack — Written in TypeScript and compiled with Babel and Rollup into CJS, ESM, and UMD bundles. Its sole runtime dependency is @popperjs/core (^2.9.0) for positioning. Styling is authored in SCSS (src/scss) with themes and animations compiled to distributable CSS. Tooling includes Jest with Puppeteer for DOM, integration, functional, and visual-regression tests, plus ESLint, Prettier, and bundlesize budgets (10 kB) enforced on the UMD bundles.

Code Quality — The codebase is cleanly modularized by concern (dom-utils, props, validation, template, plugins, addons) with internal-type separation (types-internal.ts) and dev-only validation guarded behind a __DEV__ flag that is stripped from production builds. Testing is thorough: unit suites cover utils, dom-utils, props, css, and validation, while integration and functional suites exercise createTippy, plugins, and add-ons, complemented by image-snapshot visual tests. Naming is descriptive and TypeScript types are exported for consumers.

API Design — The developer experience is deliberately minimal at the surface: a single tippy(targets, props) call covers the common case, with a large but well-documented props object for customization and a plugin array for opt-in advanced features. Sensible defaults, prebuilt themes, and clear TypeScript definitions keep boilerplate low, and the extensive official documentation site makes discovery of options straightforward.