Vue.js binding for Tippy.js which is a powerful and elegant tooltip library.

yarn add v-tippy

First, use the plugin to register v-tippy directive:

import Tippy from 'v-tippy'
// Don't forget to include CSS somewhere!
// Basically it's a copy of `tippy.js/dist/tippy.css`
import 'v-tippy/dist/tippy.css'

Vue.use(Tippy)

Then, use it:

<button title="will appear on the top" v-tippy>hover me</button>

You can pass all Tippy.js options as v-tippy directive's arguments:

<button 
  title="I'm on the left!" 
  v-tippy="{position: 'left'}">
  hover me
</button>

You can also directly set title in the arguments: v-tippy="{title: 'hi'}".

You can tweak default settings globally while installing the plugin:

Vue.use(Tippy, {
  position: 'left',
  onShown: () => console.log('lol'),
  // ... other options you wanna change globally
})

Can I supply Tippy.js options via data-* attributes?

Sure you can, but it's will only be used for once, when the binding value changes (eg: :data-position="position"), the poper generated by Tippy.js will not be updated. Supplying options via directive arguments is better.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

v-tippy © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @rem_rin_rin