visit-lib-tooltip-component
This plugin will show you tooltips for what ever the content you want in vue project.
Installation and Usage
You can install visit-lib-tooltip-component globally or in your project's node_modules folder.
To install the latest version on npm globally.
npm install visit-lib-tooltip-component
Once you install the library you need to import the component to the main.js or what ever the vue file you want to use the component.
import Vue from 'vue'
import VisitToolTip from 'visit-lib-tooltip-component';
Vue.use(VisitToolTip);
Then add the directive to the element and pass the parameters as you want. You can customize the tooltip from below mentioned parameters.
<div class="label" v-visit-tooltip="{value:'Tooltip message here !',direction:'top'">Show tooltip</div>
Tooltip properties
| Property | Parameter | Description | Sample Value |
|---|---|---|---|
| Value | value | Tooltip label | 'Tooltip message here !' |
| Direction | direction | Direction of the tooltip | 'top'/'bottom'/'left'/'right' |
| Background Color | backgroundColor | Background color of the tooltip | '#202842' |
| Text Color | textColor | Text color of the label | '#ffffff' |
| Padding | padding | Set padding to the tooltip | '8px 10px' |
| Box Shadow | boxShadow | Set box shadow to the tooltip | '0px 0px 4px rgba(32,40,66,.6)' |
| Disable tooltip | isDisabled | Show/hide tooltip | true/false |
Finally you can run the project
npm run serve
Compiles and minifies for production
npm run build