vue-follow-tooltip
vue-follow-tooltip
Tiny tooltip directive for Vue 3
Lets you create tooltips that follow cursor
🚀 Live demo 🚀
Why
Simple
No dependencies. No under-the-hood libraries. Just a couple of Vanilla JS objects
Customizable
There are a few things you can customize with options
No need to override default styles, because there aren't any. Just add your CSS as usual
Usage
Install
npm i vue-follow-tooltip
Import
import Tooltip from 'vue-follow-tooltip'
// install it with use()
app.use(Tooltip)
// OR register the directive manually
app.directive('tooltip', Tooltip)
Use
<button v-tooltip="'Look! It\'s a button, let\'s push it!">DON'T PUSH</button>
Options
You can pass options like this:
app.use(Tooltip, {
delay: 500,
center: true,
offsetX: 0,
offsetY: 20
})
The values in the example are the default values
Property names are pretty self-explanatory
Styles
The tooltip gets a class .tooltip
Use it to apply styles to it like this:
.tooltip {
background: rgba(1, 1, 1, 0.7);
padding: 10px;
border-radius: 3px;
color: #fbfbfb;
font-family: sans-serif;
transition: opacity 0.3s;
}
Styling guidelines
- There are no default styles, however, if you specify
top
,left
,opacity
&position
they will have no effect - Dont use
transition: all ..
, it will mess with how the tooltip follows the cursor
License
MIT
Dependencies
Dependencies
@babel/core: ^7.15.8@babel/preset-env: ^7.15.8@rollup/plugin-babel: ^5.3.0@rollup/plugin-commonjs: ^21.0.0@vue/cli-plugin-babel: ~4.5.0@vue/cli-plugin-eslint: ~4.5.0@vue/cli-service: ~4.5.0@vue/compiler-sfc: ^3.0.0babel-eslint: ^10.1.0core-js: ^3.6.5eslint: ^6.7.2eslint-config-prettier: ^6.15.0eslint-plugin-vue: ^7.0.0prettier: ^2.4.1rollup: ^2.58.0rollup-plugin-terser: ^7.0.2vue: ^3.0.0