v-tippy

   

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

Install

``bash
yarn add v-tippy
`

Usage

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

`js
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:

`vue
hover me
`

$3

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

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

`

$3

You can tweak default settings globally while installing the plugin:

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

Gotchas

> 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.

Contributing

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

Author

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