A tooltip directive for Vue.js based on tippy.js
Last updated 2 years ago by egoist .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install v-tippy 
SYNC missed versions from official npm registry.


NPM version NPM downloads CircleCI donate

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'


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:

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

Default settings

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

Current Tags

  • 2.0.0                                ...           latest (2 years ago)

4 Versions

  • 2.0.0                                ...           2 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (2)
Today 0
This Week 2
This Month 16
Last Day 0
Last Week 1
Last Month 29
Dependencies (2)
Dev Dependencies (3)

Copyright 2014 - 2016 © taobao.org |