A Vue 2 plugin that provides a custom directive allowing the usage of any tooltip component as a directive.
npm install vue-tooltip-directiveA Vue 2 plugin that provides a custom directive allowing the usage of any tooltip component as a directive.
Currently built for Vuetify and depends on usage of their components' activator functionality, however I'm sure this could be adapted to handle others.
1. Install the npm dependency:
``npm install --save vue-tooltip-directive`
2. Include the plugin into your Vue app by adding a Vue.use(..) in the root file of your Vue project (usually main.js/main.ts):`typescript
import Vue from 'vue'
import VueTooltipDirective from 'vue-tooltip-directive'
Vue.use(VueTooltipDirective)
`
3. You should now be able to use the directive in your project on any display component:vue`
Hover me!
4. provides a default Tooltip component for you, but if you want to customize it you can simply create your own and pass it to the plugin as the component key in the config object:`typescript
import MyCustomTooltip from '@/components/MyCustomTooltip.vue'
Vue.use(VueTooltipDirective, {
component: MyCustomTooltip
})
`
v-tooltip="'Basic explanatory tooltip'"`
- v-tooltip:left="'Left aligned tooltip'"`
- v-tooltip:[variable]="'Dynamically positioned tooltip'"`
- v-tooltip="{ content: 'Config object tooltip', position: 'right', anyExtraProps: 'here!' }"`If no position is provided either via the directive argument or in the config object, it will default to
.
Any extra values provided in the config object will also be passed to your custom component as props.$3
| Field | Values |
|----------|------------------------------------------|
| content | string |
| position | 'top' \| 'right' \| 'bottom' \| 'left'` |