tippy.js wrapper for VueJS
npm install vuejs-tippy because it doesn't make sense in my opinion to use to be inline/inline-block. There are clases added for you to handle the styling/formatting.
#### Todo:
- [ ] figure out a better way to avoid wrapping everything
- [ ] write tests
- [ ] efficient code
- [ ] tippy.js singleton?
---
Quick Setup
#### CDN
``html
`
#### Package Manager
Client side JS should be a dev dependency for those who build their app's assets
`shell script
npm
npm i --save-dev vuejs-tippy
yarn
yarn add --dev vuejs-tippy
`
`js
import Vue from 'vue'
import VueJSTippy from 'vuejs-tippy'
Vue.use(VueJSTippy, options); // component is also loaded here
`
Usage
#### Default Options
- tippy.js props combined with the following:
| key | desc | type | defaut |
| --- | ---- | ------- | ---- |
| directive | controls v- and component: | String | tippy |
| ignoreAttributes | disables data-tippy-* for performance | Boolean | true |
#### Lifecycle Hooks
- Both the directive and component support tippy.js's hooks. Simply put @<hook> on the element/component for example:
`html
`
#### v-tippy Directive
- allows using title, but is static
- v-tippy and :content are checked on updates
- utilizes vuejs directive modifiers
##### Static Tooltip
- content, title as attributes
`html
`
##### Dynamic Tooltip
- Set tooltip content via directive argument:v-tippy="variable" or as :content prop
`html
`
##### Directive Modifiers
- append to v-tippy directive e.g. v-tippy.modifier, applies only to tippy.js boolean props
`html
`
#### Vue Component
- only :content and :options
- :enabled & :visible boolean props for tippy's .enable() / .disable() and .show() / .hide() functions respectively
- can set options quickly via html attributes
- ex:
`html
I'm a tooltip!
single tooltip for multiple elements of the same class
``
---
Credits
- atomiks for creating tippy.js
- KABBOUCHI for creating vue-tippy which gave me a better understanding of Vue plugins