v-tippy
Vue.js binding for Tippy.js which is a powerful and elegant tooltip library.
Install
yarn add v-tippy
Usage
First, use the plugin to register v-tippy
directive:
// Don't forget to include CSS somewhere!// Basically it's a copy of `tippy.js/dist/tippy.css` Vue
Then, use it:
<button title="will appear on the top" v-tippy>hover me</button>
Supply Tippy.js options
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>
Default settings
You can tweak default settings globally while installing the plugin:
Vue
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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- 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