https://github.com/egoist/v-tippy
Vue.js binding for Tippy.js
https://github.com/egoist/v-tippy
directive tooltip vue
Last synced: about 1 year ago
JSON representation
Vue.js binding for Tippy.js
- Host: GitHub
- URL: https://github.com/egoist/v-tippy
- Owner: egoist
- License: mit
- Created: 2017-07-21T08:18:59.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T09:52:42.000Z (over 3 years ago)
- Last Synced: 2025-04-14T07:07:39.099Z (about 1 year ago)
- Topics: directive, tooltip, vue
- Language: JavaScript
- Homepage:
- Size: 233 KB
- Stars: 55
- Watchers: 4
- Forks: 4
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-tippy
[](https://npmjs.com/package/v-tippy) [](https://npmjs.com/package/v-tippy) [](https://circleci.com/gh/egoist/v-tippy/tree/master) [](https://github.com/egoist/donate)
> Vue.js binding for [Tippy.js](https://atomiks.github.io/tippyjs/) 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
```
### Supply Tippy.js options
You can pass **all** [Tippy.js](https://atomiks.github.io/tippyjs/) [options](https://atomiks.github.io/tippyjs/#all-settings) as `v-tippy` directive's arguments:
```vue
hover me
```
### Default settings
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](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/v-tippy/contributors)).
> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)