vue-tippy

vue-tippy is a Vue.js 3 integration for Tippy.js, the popular positioning engine for tooltips, popovers, dropdowns, and menus. It exposes Tippy’s full feature set through idiomatic Vue primitives: a v-tippy directive, a <Tippy> component, and composables like useTippy and useSingleton for building rich interactive overlays.

Every Tippy.js option, from placement and animation to interactive content and singleton grouping, is available with reactive props and TypeScript types, letting you add polished, accessible tooltips to any Vue application with minimal boilerplate.

What You Get

• A v-tippy directive for adding tooltips to any element inline in templates
• A <Tippy> component that wraps content and renders interactive popovers
• Composables (useTippy, useTippyComponent, useSingleton) for programmatic control
• Singleton support to group many tooltips into one shared, smoothly transitioning instance
• Full access to Tippy.js options, plugins, animations, and TypeScript types

Common Use Cases

• Adding hover tooltips to buttons, icons, and form fields
• Building interactive popovers, dropdowns, and context menus
• Grouping related tooltips into a single singleton for consistent transitions
• Programmatically creating and updating tooltips from composition-API logic

Under The Hood

Architecture - The library is organized under src/ into a plugin (global install), a directive, components (Tippy.ts, TippySingleton.ts), and composables (useTippy, useTippyComponent, useSingleton). Each surface is a thin reactive adapter over Tippy.js instances, translating Vue props and lifecycle hooks into Tippy’s imperative create/setProps/destroy API while keeping option types centralized in src/types.

Tech Stack - Written in TypeScript and built with Rollup, with tippy.js as the core runtime dependency and Vue 3 as the peer. The repo ships CJS/ESM entry points, an api-extractor config for type bundling, and a Vite/webpack-based playground plus a docs site.

Code Quality - The code is cleanly modularized by responsibility (plugin, directive, components, composables, types) and fully typed, with a global.d.ts declaring the injected directive/component. There is no dedicated unit-test suite; correctness is exercised through the playground and documentation examples rather than automated tests.

API Design - The public API is deliberately multi-modal so it fits any style: a one-attribute directive for the simplest case, a declarative component for wrapped content, and composables for full programmatic control. Prop and option naming mirrors Tippy.js directly, so existing Tippy knowledge transfers with almost no translation.