Tippy.vue

Nesting-free Tippy.js directive/component for Vue 3

Design

- Easy to use: A clumsy tool will wind up chronically underutilized, so Tippy.vue has been designed with a focus
on ergonomics.
- Clean to write: Writing Tippy.vue is clean. We don't use wrapper components, everything is in the default slot,
and common options are exposed as props.
- Clean HTML: Tippy.vue mounts itself and then disappears from the DOM tree, leaving your layout untouched.

Examples

``vue

">Counter
Side


Counter
Time: {{seconds}}

Props
Side tooltip



Button
Bound to parent



Follow me
Tip



Item 1 Tip 1
Item 2 Tip 2
Item 3 Tip 3
`

More examples and working demos can be found in the documentation.

$3

Tippy.vue doesn't have a vue property for every Tippy.js prop, instead providing extra for additional options. This
is by design, since it keeps the API clean and easy to understand. You can however add you own props without any
modifications to the base library. This is a fairly advanced feature, but it's available if needed.
See the docs for an overview of the API.

Why?

There's already a popular Vue library for using Tippy.js, VueTippy, so you
might (rightfully) ask, why make another one?

To put it simply, VueTippy makes a few structural concessions which I disagree with. The most significant is that when
using VueTippy, adding a complex (i.e. non-directive) tooltip to an element will wrap it in a , which can easily
screw up a complex layout. On top of that, I find their syntax clunky and ugly. Wrapping every tooltipped component in a
slot seems unnecessary.

One of my mottos is that a clumsy tool will wind up chronically underutilized, so Tippy.vue has been designed from the
start with a strong focus on ergonomics. Adding a tooltip is a simple, drop-in addition, with no structural or styling
changes necessary.

`html


Tippy!





Tippy!
Hi!
`

🚀 Installation

$3

`shell


npm

npm i tippy.vue

Yarn

yarn add tippy.vue
`

$3

Tippy.vue doesn't bundle Tippy.js. The most up-to-date Tippy install process is explained
in the Tippy docs, but as of the time of writing, these
are the necessary scripts:
`html





`
`html





`

Usage

$3


You can use Tippy.vue as a plugin or access the individual components directly:
`js
// use the plugin
import {TippyPlugin} from 'tippy.vue';

app.use(TippyPlugin);
app.use(TippyPlugin, {
tippyDefaults: {}, // convenience to set tippy.js default props
});
`
`js
// or add them individually
import {TippyDirective, Tippy, TippySingleton} from 'tippy.vue';

app.directive('tippy', TippyDirective);
app.component('tippy', Tippy);
app.component('tippy-singleton', TippySingleton);

import tippy from 'tippy.js'
tippy.setDefaultProps({
// default tippy props
});
`
`css
/ add styles/themes to your global stylesheet /
@import '~tippy.js/dist/tippy.css';
`

You can also add them in individual components:
`vue



`

$3

`js
// use the plugin
app.use(TippyVue);
app.use(TippyVue, {
tippyDefaults: {}, // convenience to set tippy.js default props
});
`
`js
// or add them individually
app.directive('tippy', TippyVue.TippyDirective);
app.component('tippy', TippyVue.Tippy);
app.component('tippy-singleton', TippyVue.TippySingleton);
tippy.setDefaultProps({
// default tippy props
});
`

$3

Tippy.vue includes code completion files for IntelliJ IDEA, Vetur, and Volar.
See the docs for details on how to use them.

Contributing

Setting up an environment is very standard. Make sure you're on the latest version of yarn, then run:
`shell
yarn install
yarn docs:dev
``