Vue.js tooltip directive
Basic usage
import Vue from 'vue';
import { VueTooltip } from '@kashio/vue-tooltip';
import '@kashio/vue-tooltip/dist/index.css';
Vue.use(VueTooltip);
export default new Vue({
el: '#app',
render: h => h('span', {
style: {
position: 'relative',
top: '50%',
left: '50%',
backgroundColor: 'red'
},
directives: [
{
name: 'tooltip',
value: {message: 'Test tooltip'}
}
]
}, 'Hover Me')
});
Table of contents
Options
Values
-
fade
- Fade speed (Number
|String
). Defaults toslow
(see jQuery fade values). -
position
- Tooltip position (String
). Eithertop
,left
,bottom
, orright
. Defaults toright
. -
message
- Tooltip message (string
). -
color
- Tooltip message color (string
). Defaults towhite
. -
backgroundColor
- Tooltip background color (string
). Defaults torgba(0, 0, 0, 0.8)
. -
margin
- Tooltip margin (Number
). Defaults to2
.
Tests
Run tests with
$ npm test
License
vue-tooltip is licensed under the GPL V3 License.