A tooltip directive for Vue.js based on tippy.js
npm install v-tippy   
> Vue.js binding for Tippy.js which is a powerful and elegant tooltip library.
``bash`
yarn add v-tippy
First, use the plugin to register v-tippy directive:
`jstippy.js/dist/tippy.css
import Tippy from 'v-tippy'
// Don't forget to include CSS somewhere!
// Basically it's a copy of
import 'v-tippy/dist/tippy.css'
Vue.use(Tippy)
`
Then, use it:
`vue`
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
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
})
> 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-featuregit commit -am 'Add some feature'
3. Commit your changes: git push origin my-new-feature`
4. Push to the branch:
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