Tiny vue 3 tooltip directive
npm install vue-follow-tooltipTiny tooltip directive for Vue 3
Lets you create tooltips that follow cursor
🚀 Live demo 🚀
No dependencies. No under-the-hood libraries. Just a couple of Vanilla JS objects
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
> More about styles More about options
``
npm i vue-follow-tooltip
`javascript
import Tooltip from 'vue-follow-tooltip'
// install it with use()
app.use(Tooltip)
// OR register the directive manually
app.directive('tooltip', Tooltip)
`
`xml`
You can pass options like this:
`javascript`
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
The tooltip gets a class .tooltip
Use it to apply styles to it like this:
`css`
.tooltip {
background: rgba(1, 1, 1, 0.7);
padding: 10px;
border-radius: 3px;
color: #fbfbfb;
font-family: sans-serif;
transition: opacity 0.3s;
}
- There are no default styles, however, if you specify top, left, opacity & position they will have no effecttransition: all ..`, it will mess with how the tooltip follows the cursor
- Dont use
MIT