# vue-tippy: Tippy.js tooltips wired into Vue 3 templates

> vue-tippy is a Vue 3 wrapper around Tippy.js that attaches tooltips through a directive, a component, or a composition API function. It is small, typed, and MIT licensed, but its documentation lives on a separate site and the v6 and v4 lines are split across branches.

**KABBOUCHI/vue-tippy** — VueJS Tooltip powered by Tippy.js

- Repository: https://github.com/KABBOUCHI/vue-tippy
- Website: https://vue-tippy.netlify.app
- Stars: 790 · Forks: 94
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/kabbouchi-vue-tippy

## vue-tippy exposes Tippy.js through three Vue 3 surfaces

vue-tippy is a Vue 3 wrapper for Tippy.js, the tooltip library that renders a floating popper attached to a target element. The package does not reimplement tooltip behaviour; it binds an existing tooltip engine to the way Vue developers write markup. Three entry points are documented: a directive named v-tippy, a component named Tippy, and a composition function called useTippy. Each one accepts a content value and hands it to Tippy.js, so the choice between them is about template style rather than capability.

That makes the package interesting to two groups. The first is teams that already rely on Tippy.js and want tooltip instances created and destroyed with their Vue components rather than by hand. The second is developers who have written their own tooltip binding and want a maintained wrapper instead. The project is written in TypeScript, ships generated declaration files, carries an MIT licence, and publishes its documentation at a dedicated site rather than in the repository.

## The v-tippy directive forwards its value as Tippy options

The directive is registered under the name tippy by default, which in a template becomes v-tippy. The value bound to the directive is passed to Tippy.js, and the project shows two accepted shapes. An object literal carries explicit configuration, while a bare string is shorthand for plain text content.

```html
<button v-tippy="{ content: 'Hi!' }">Tippy!</button>
<button v-tippy="'Hello!'">Tippy!</button>
```

The directive can also be imported on its own for local registration, which matters when you do not want a global plugin call.

```html
<script setup>
import { directive as VTippy } from 'vue-tippy'
</script>
```

The documentation does not enumerate which Tippy.js options travel through the directive beyond content, so if you plan to rely on placement, offsets, themes or interactive behaviour, that assumption has to be checked against the library you already depend on rather than against this package.

## The Tippy component wraps one child element as the anchor

The component form exists for templates where wrapping an element reads better than attaching an attribute. A Tippy element carries a content attribute and holds the target as its child.

```html
<Tippy content="Hi!">
  <button>Tippy!</button>
</Tippy>
```

```html
<script setup>
import { Tippy } from 'vue-tippy'
</script>
```

The component and the directive are not interchangeable in every layout. The directive annotates the element itself, so the anchor is unambiguous. The component moves the anchor into the child position, which is convenient for a button but means the child is what gets the tooltip rather than the wrapper. The plugin options include a component key that sets the tag name used in templates, and the directive key that sets the attribute name, so both names can be changed at install time rather than by editing every template.

## useTippy attaches to a template ref inside setup

For code-heavy components, the package exports a composition function. You keep a ref to the element, call useTippy with that ref and a content option, and return a render function. The example uses defineComponent, ref and h, the render-function style of Vue 3.

```js
import { defineComponent, ref, h } from 'vue'
import { useTippy } from 'vue-tippy'
```

```js
useTippy(button, {
  content: 'Hi!',
})
```

```js
return () => h('button', { ref: button }, 'Tippy!')
```

The interesting detail is what the signature implies: the tooltip is attached to a DOM ref, not to a virtual node, so the target must exist by the time the call runs. That rules out attaching to an element that has not been rendered yet, and it means the function is the right tool when the anchor is produced by a conditional render. The documentation does not describe an explicit teardown call, so relying on unmount cleanup rather than manual destruction is the safer assumption until you read the API reference yourself.

## Installing the package means choosing the Vue major version and the wrapper major version

Installation is a single package install, and the version tag matters because the project keeps older Tippy.js generations on separate branches.

```bash
npm install vue-tippy@v6
```

```bash
yarn add vue-tippy@v6
```

The package manifest declares a single peer dependency, vue ^3.2.0, which means a Vue 3.2 or newer application is a hard requirement and the package manager will warn when that range is not met. The package is aimed at Vue 3 specifically.

```js
import { createApp } from 'vue'
import VueTippy from 'vue-tippy'
```

Global registration is optional and takes a configuration object with a directive key and a component key, both marked optional in the example.

```js
app.use(
  VueTippy,
  // optional
  {
    directive: 'tippy', // => v-tippy
    component: 'tippy', // => <tippy/>
  }
)
```

If your application still runs Tippy.js v4, the project points you at a separate v4 branch instead of the v6 line, so the install tag alone is not enough to settle the question.

## The published package ships five module formats plus generated types

The manifest is careful about resolution, which tells you more about the intended consumers than the README does. The package lists index.js as the main entry, dist/vue-tippy.mjs as the module entry, and an exports map that handles browser builds, node imports, and a conditional require that separates production and development CommonJS files, with index.js as the default fallback.

The unpkg and jsdelivr fields point at a single browser IIFE file, and the types field points at dist/vue-tippy.d.ts, a declaration file produced by api-extractor through the build:dts script. The regular build script runs rollup against rollup.config.js, and prepublishOnly runs both builds before publishing.

The sideEffects field is set to false, which lets a bundler drop unused exports during tree shaking. The files list is explicit about what ships: the src directory, the compiled js, mjs and cjs outputs, the declaration file, index.js, index.cjs, the vetur directory, tsconfig.json, the licence and the README. Notably, the docs directory and the playground directory are not part of the published package.

## Documentation and versioned code sit outside the package

The full v6 documentation is hosted at a separate address, vue-tippy.netlify.app, and the README defers to it. The repository itself keeps the source under src, a docs folder, a playground folder, and build configuration through rollup.config.js, webpack.config.js, api-extractor.json and tsconfig.json. Vetur metadata is included so that editor tooling can offer completions for the directive and component.

Two consequences follow for an adopting team. The documentation is not vendored into the package or the repository, so it is only as available as the hosted site. And the project keeps the Tippy.js v4 generation on a separate branch, with a notice in the README linking to the v4 tree, which means a migration path between the two generations is a branch switch rather than an in-place upgrade.

The release history reflects an irregular cadence. The most recent release is v6.8.0 on 2026-09-15, and the last push carries the same date, so the repository is not dormant. The previous listed release is v6.7.1 on 2025-05-22, which leaves a long quiet stretch between the two versions. That gap is worth noting when you judge how quickly fixes and compatibility updates arrive, without assuming a release rhythm the history does not show.

## Conclusion

Adopt vue-tippy if your team already uses Tippy.js and wants tooltip behaviour to follow the Vue component lifecycle instead of manual instance calls; it is a thin binding layer, not a tooltip engine. Skip it if you need Tippy.js v4 semantics, Vue 2 support, or offline documentation, since the package declares a vue ^3.2.0 peer dependency and points v4 users to a separate branch. Before installing, check that the Tippy.js options you need are exposed by the directive and component forms, and confirm the version your application already loads so you land on the v6 line rather than the v4 branch.

## FAQ

### Does vue-tippy support Vue 2?

No. The package manifest declares a peer dependency of vue ^3.2.0, so a Vue 3.2 or newer application is required. The separate v4 branch is described as the line for Tippy.js v4, not for Vue 2.

### How do I rename the vue-tippy directive or component?

The plugin accepts an optional configuration object with a directive key and a component key, shown as directive: 'tippy' and component: 'tippy' in the installation example. Passing different values changes the attribute name and the template tag name.

### Which Tippy.js generation should I use with vue-tippy v6?

The v6 line is the wrapper for current Tippy.js usage. If your application depends on Tippy.js v4, the project directs you to the v4 branch of the repository instead of the v6 line.

### Can I attach a vue-tippy tooltip without a template directive?

Yes. The package exports useTippy, which is applied to a template ref inside setup, as shown with useTippy(button, { content: 'Hi!' }) followed by a render function that attaches the ref to the element.

## Sources

- [KABBOUCHI/vue-tippy on GitHub](https://github.com/KABBOUCHI/vue-tippy)
- [License: MIT](https://github.com/KABBOUCHI/vue-tippy/blob/main/LICENSE)
- [Project website](https://vue-tippy.netlify.app)
- [README](https://github.com/KABBOUCHI/vue-tippy/blob/main/README.md)
- [Releases](https://github.com/KABBOUCHI/vue-tippy/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/kabbouchi-vue-tippy