vue-hint.css
A lightweight wrapper for hint.css that brings customizible tooltips to Vue.js
Links
It's just a small directive that adds tooltips to your elements.
You can import it directly in your HTML page (it will be available as a global variable named VueHintCss.default
):
Or install through npm...
npm i vue-hint.css --save
...and then import it:
const Hint =
Usage
In your component:
directives:Hint...
In your template:
Submit
Modifiers
vue-hint.css supports all the options hint.css provides. It does it through modifiers. For example, to show a persistent, rounded, red tooltip to the right of your element:
v-hint.right.rounded.always.error="'Tooltip'"
Supported modifiers:
top
,right
,bottom
,left
error
,success
,info
,warning
always
rounded
no-animate
bounce
If you want to hide a persistent tooltip (always
), just set it to false
or null
.