vue-tippy

library6.7.1jsnpmunverified

Vue Tippy is an official Vue.js 3 wrapper for Tippy.js, a lightweight and highly customizable JavaScript tooltip library. It facilitates the integration of dynamic and accessible tooltips, popovers, and dropdowns into Vue 3 applications, offering comprehensive control over placement, triggers, content rendering, and styling. The package is currently at version 6.7.1, which is designed for compatibility with Vue 3.x and Tippy.js v6. The project's release cadence is closely tied to major updates in either Vue or Tippy.js, ensuring ongoing alignment with the latest features and API changes of its core dependencies. Key differentiators include its flexible integration patterns: developers can choose between a global Vue plugin that registers both a `v-tippy` directive and a `<Tippy>` component, direct local imports of the directive or component for fine-grained control, or leverage the `useTippy` Composition API hook for programmatic tooltip management within setup functions. This adaptability allows developers to pick the integration method best suited for their specific project architecture and component design, while benefiting from full TypeScript support.

web-framework

npm install vue-tippy

package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-TIPPY

vue-tippy

web-frameworkjavascriptv6.7.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueTippy (plugin default)

✓ import VueTippy from 'vue-tippy'

✗ const VueTippy = require('vue-tippy')

Used for global plugin installation with `app.use()`. CommonJS `require` syntax is incompatible with Vue 3's ESM-first approach without transpilation.

plugin as VueTippy (plugin named)

✓ import { plugin as VueTippy } from 'vue-tippy'

Alternative named import for the plugin, functionally identical to the default export. Useful if default export conflicts.

directive as VTippy

✓ import { directive as VTippy } from 'vue-tippy'

✗ import { VTippy } from 'vue-tippy'

Imports the directive for local registration (e.g., `directives: { tippy: VTippy }`) or direct use in `<script setup>`. The `as VTippy` alias is conventional and recommended.

Tippy (component)

✓ import { Tippy } from 'vue-tippy'

✗ import Tippy from 'vue-tippy'

Imports the `<Tippy>` component for local registration or direct use in `<script setup>`. It is a named export, not a default export.

useTippy (Composition API)

✓ import { useTippy } from 'vue-tippy'

✗ import useTippy from 'vue-tippy'

Imports the Composition API composable for programmatic tooltip control. It is a named export, not a default export.

Tippy.js base styles

✓ import 'tippy.js/dist/tippy.css'

A side-effect import to include the default CSS styles for Tippy.js tooltips. Crucial for proper visual rendering.

Initializes a Vue 3 application, globally registers the VueTippy plugin, and demonstrates basic usage of both the `v-tippy` directive and the `<Tippy>` component. Includes essential CSS import.

import { createApp } from 'vue'; import VueTippy from 'vue-tippy'; import 'tippy.js/dist/tippy.css'; // Essential for basic styling // Optional: Import additional themes if desired // import 'tippy.js/themes/light.css'; const App = { template: ` <div id="app"> <h1>Vue Tippy Quickstart</h1> <p> <button v-tippy="{ content: 'Hello from directive!', placement: 'top' }"> Hover for directive tippy </button> <Tippy content="Hello from component!" placement="right"> <button>Hover for component tippy</button> </Tippy> </p> </div> `, }; const app = createApp(App); // Globally register the VueTippy plugin app.use(VueTippy, { directive: 'tippy', // Configures the directive name to 'v-tippy' component: 'tippy', // Configures the component name to '<Tippy/>' defaultProps: { // Optional: Set global default Tippy.js props delay: [100, 200], theme: 'light', }, }); app.mount('#app');

Debug

Known issues

breakingVue Tippy v6 is specifically designed for Vue 3.x and Tippy.js v6. Using it with Vue 2.x or older Tippy.js versions (e.g., Tippy.js v4) will result in incompatibility and errors. Ensure your project meets the Vue 3.2.0+ peer dependency.

fix

For Vue 2 projects, use `vue-tippy@v4`. For Vue 3, ensure your Vue version is 3.2.0 or higher. For new projects, install `vue-tippy@v6` explicitly via `npm install vue-tippy@v6` or `yarn add vue-tippy@v6`.

affects: <6.0

gotchaMissing `tippy.js/dist/tippy.css` or theme CSS imports will cause tooltips to render without any styling, appearing as plain text without proper positioning, background, or arrow.

fix

Always include `import 'tippy.js/dist/tippy.css'` in your main application entry file (e.g., `main.ts` or `main.js`). If using specific themes (e.g., `light`, `material`), import their respective CSS files like `import 'tippy.js/themes/light.css'`.

affects: >=6.0

breakingVue Tippy, like most modern Vue 3 packages, primarily uses ECMAScript Modules (ESM). Attempting to use CommonJS `require()` statements for imports will likely lead to module resolution errors in projects configured for ESM, especially in a browser context or with certain build tools.

fix

Always use `import` statements for `vue-tippy` and its exports. If you encounter issues in a Node.js environment, ensure your project is configured for ESM (e.g., `"type": "module"` in `package.json`) or use a bundler like Vite/Webpack that correctly handles ESM.

affects: >=6.0

Errors

Common errors & fixes

Failed to resolve component: Tippy

The `<Tippy>` component was used in a template but not properly registered with Vue.

fix

Ensure you either globally register the plugin via `app.use(VueTippy)` in your `main.ts`/`main.js`, or locally import and register the component in your Vue component's `<script setup>` or `components` option: `import { Tippy } from 'vue-tippy'; components: { Tippy }`.

Failed to resolve directive: tippy

The `v-tippy` directive was used in a template but not properly registered with Vue.

fix

Ensure you either globally register the plugin via `app.use(VueTippy)` in your `main.ts`/`main.js`, or locally import and register the directive in your Vue component's `<script setup>` or `directives` option: `import { directive as VTippy } from 'vue-tippy'; directives: { tippy: VTippy }`.

TypeError: (0 , vue_tippy__WEBPACK_IMPORTED_MODULE_0__.useTippy) is not a function

The `useTippy` Composition API function was imported incorrectly, often due to attempting a default import when it's a named export.

fix

Correct the import statement to use named import syntax: `import { useTippy } from 'vue-tippy'`.

Upgrade

Version history

6.7.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency; required Vue.js 3.2.0 or higher for the wrapper to function.

tippy.jsrequiredCore dependency; vue-tippy is a wrapper for tippy.js, providing its underlying tooltip functionality.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-tippy ↗

homepagehttps://vue-tippy.com ↗