vue-hint.css
Vue directive for hint.css
Install
npm
npm install -D vp-vue-hint.css
import Vue from 'vue'
import vueHintCss from 'vp-vue-hint.css'
Vue.use(vueHintCss)
CDN
<link rel="stylesheet" href="https://unpkg.com/hint.css"></link>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vp-vue-hint.css"></script>
<script>
Vue.use(vueHintCss)
</script>
Usage
Check codepen example.
Basic
<button v-hint-css="'hover me!!!'">
Modifiers
With Modifiers:
<button v-hint-css.right.warning.small.bounce.always.rounded="options">
Modifiers First:
With modifier .static
, modifiers will have higher priority than options.
<button v-hint-css.right.warning.small.bounce.always.rounded.static="options">
Advanced
<template>
<button v-hint-css="options">
</template>
<script>
export default {
data () {
return {
options: {
text: null,
direction: null,
color: null,
size: null,
always: false,
rounded: false,
effect: null
}
}
}
}
</script>
Plugin options
Vue.use(vueHintCss, {
directive: 'hint-css',
prefixClass: 'hint--',
attr: 'aria-label'
})
Default values
Vue.use(vueHintCss, {
defaultText: 'Default Text',
defaultDirection: 'bottom',
defaultColor: 'warning',
defaultSize: 'large',
defaultAlways: true,
defaultRounded: true,
defaultEffect: 'bounce'
})
Default values are reactive:
import vueHintCss, {defaultOptions} from 'vp-vue-hint.css'
Vue.use(vueHintCss)
defaultOptions.text: 'Default Text',
defaultOptions.direction: 'bottom',
defaultOptions.color: 'warning',
defaultOptions.size: 'large',
defaultOptions.always: true,
defaultOptions.rounded: true,
defaultOptions.effect: 'bounce'