{"id":14309,"library":"vue-tippy","title":"Vue Tippy","description":"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.","status":"active","version":"6.7.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-tippy","lang":"bash","label":"npm"},{"cmd":"yarn add vue-tippy","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-tippy","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required Vue.js 3.2.0 or higher for the wrapper to function.","package":"vue","optional":false},{"reason":"Core dependency; vue-tippy is a wrapper for tippy.js, providing its underlying tooltip functionality.","package":"tippy.js","optional":false}],"imports":[{"note":"Used for global plugin installation with `app.use()`. CommonJS `require` syntax is incompatible with Vue 3's ESM-first approach without transpilation.","wrong":"const VueTippy = require('vue-tippy')","symbol":"VueTippy (plugin default)","correct":"import VueTippy from 'vue-tippy'"},{"note":"Alternative named import for the plugin, functionally identical to the default export. Useful if default export conflicts.","symbol":"plugin as VueTippy (plugin named)","correct":"import { plugin as VueTippy } from 'vue-tippy'"},{"note":"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.","wrong":"import { VTippy } from 'vue-tippy'","symbol":"directive as VTippy","correct":"import { directive as VTippy } from 'vue-tippy'"},{"note":"Imports the `<Tippy>` component for local registration or direct use in `<script setup>`. It is a named export, not a default export.","wrong":"import Tippy from 'vue-tippy'","symbol":"Tippy (component)","correct":"import { Tippy } from 'vue-tippy'"},{"note":"Imports the Composition API composable for programmatic tooltip control. It is a named export, not a default export.","wrong":"import useTippy from 'vue-tippy'","symbol":"useTippy (Composition API)","correct":"import { useTippy } from 'vue-tippy'"},{"note":"A side-effect import to include the default CSS styles for Tippy.js tooltips. Crucial for proper visual rendering.","symbol":"Tippy.js base styles","correct":"import 'tippy.js/dist/tippy.css'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport VueTippy from 'vue-tippy';\nimport 'tippy.js/dist/tippy.css'; // Essential for basic styling\n\n// Optional: Import additional themes if desired\n// import 'tippy.js/themes/light.css';\n\nconst App = {\n  template: `\n    <div id=\"app\">\n      <h1>Vue Tippy Quickstart</h1>\n      <p>\n        <button v-tippy=\"{ content: 'Hello from directive!', placement: 'top' }\">\n          Hover for directive tippy\n        </button>\n        <Tippy content=\"Hello from component!\" placement=\"right\">\n          <button>Hover for component tippy</button>\n        </Tippy>\n      </p>\n    </div>\n  `,\n};\n\nconst app = createApp(App);\n\n// Globally register the VueTippy plugin\napp.use(VueTippy, {\n  directive: 'tippy', // Configures the directive name to 'v-tippy'\n  component: 'tippy', // Configures the component name to '<Tippy/>'\n  defaultProps: { // Optional: Set global default Tippy.js props\n    delay: [100, 200],\n    theme: 'light',\n  },\n});\n\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"Vue 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.","severity":"breaking","affected_versions":"<6.0"},{"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'`.","message":"Missing `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.","severity":"gotcha","affected_versions":">=6.0"},{"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.","message":"Vue 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.","severity":"breaking","affected_versions":">=6.0"}],"env_vars":null,"search_vec":"'3':9,35,61 '6.7.1':53 'access':28 'adapt':150 'align':84 'allow':151 'api':90,140 'applic':36 'architectur':164 'benefit':169 'best':158 'cadenc':70 'chang':91 'choos':105 'close':72 'compat':58 'compon':121,129,166 'composit':139 'comprehens':38 'content':43 'control':39,134 'core':94 'current':50 'customiz':17 'depend':95 'design':56,167 'develop':103,152 'differenti':97 'direct':118,122,127 'dropdown':32 'dynam':26 'either':78 'ensur':82 'facilit':22 'featur':88 'fine':132 'fine-grain':131 'flexibl':100 'full':171 'function':148 'global':108 'grain':133 'high':16 'hook':141 'import':124 'includ':98 'integr':24,101,156 'javascript':18,174 'key':96 'latest':87 'leverag':136 'librari':20 'lightweight':14 'local':123 'major':75 'manag':145 'method':157 'offer':37 'offici':7 'ongo':83 'packag':48 'pattern':102 'pick':154 'placement':41 'plugin':110 'popov':30 'programmat':143 'project':67,163 'regist':112 'releas':69 'render':44 'setup':147 'specif':162 'style':46 'suit':159 'support':173 'tie':73 'tippi':2,4,117 'tippy.js':12,64,81 'tooltip':19,29,144 'trigger':42 'typescript':172,175 'updat':76 'usetippi':138 'v':116 'v-tippi':115 'v6':65 'version':52 'vue':1,3,34,60,79,109 'vue.js':8 'within':146 'wrapper':10 'x':62","created_at":"2026-04-20T01:59:02.627798+00:00","updated_at":"2026-04-20T01:59:02.627798+00:00","problems":[{"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 }`.","cause":"The `<Tippy>` component was used in a template but not properly registered with Vue.","error":"Failed to resolve component: Tippy"},{"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 }`.","cause":"The `v-tippy` directive was used in a template but not properly registered with Vue.","error":"Failed to resolve directive: tippy"},{"fix":"Correct the import statement to use named import syntax: `import { useTippy } from 'vue-tippy'`.","cause":"The `useTippy` Composition API function was imported incorrectly, often due to attempting a default import when it's a named export.","error":"TypeError: (0 , vue_tippy__WEBPACK_IMPORTED_MODULE_0__.useTippy) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://vue-tippy.com","github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-tippy","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}