vue-info
A simple Vue js tooltip plugin
Need a simple tooltip on hover for any action buttons, links, text and more, provide a better UX to your project.
Demo site
Install
npm install vue-info
yarn add vue-info
How to configure / customize this plugin
-
Wrap the button or link add as child of vue-info component - Accepts single html element or a component
Requiredimport VueInfo from 'vue-info'; export default { ... components: { ... VueInfo, }, ... };
Then add it to your template
<VueInfo info="Demo Vue Info" > <a href="https://vue-info.netlify.app/">vue-info documentation</a> </VueInfo>
-
info="Tooltip info message or dresription"
Required -
color="choose one -> 'black', 'white', 'red'"
default white text black background. -
position="choose one -> 'left', 'right', 'top', 'bottom'"
default top -
square="true/false"
default false, rounded by 6px
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^11.0.1@rollup/plugin-replace: ^2.3.4@vue/cli-plugin-babel: ^4.5.10@vue/cli-service: ^4.5.10cross-env: ^7.0.3minimist: ^1.2.5rollup: ^2.36.1rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^5.1.9vue: ^2.6.12vue-template-compiler: ^2.6.12