kashio / vue-tooltip

Vue.js tooltip directive

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

---

Options

Values

• fade - Fade speed (Number | String). Defaults to slow (see jQuery fade values).
• position - Tooltip position (String). Either top, left, bottom, or right. Defaults to right.
• message - Tooltip message (string).
• color - Tooltip message color (string). Defaults to white.
• backgroundColor - Tooltip background color (string). Defaults to rgba(0, 0, 0, 0.8).
• margin - Tooltip margin (Number). Defaults to 2.

Tests

Run tests with
$ npm test

License

vue-tooltip is licensed under the GPL V3 License.