https://github.com/Kashio/vue-tooltip

Vue.js tooltip directive
https://github.com/Kashio/vue-tooltip

Last synced: 11 days ago
JSON representation

Vue.js tooltip directive

• Host: GitHub
• URL: https://github.com/Kashio/vue-tooltip
• Owner: Kashio
• License: gpl-3.0
• Created: 2016-12-30T11:40:39.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-01-01T18:47:49.000Z (almost 9 years ago)
• Last Synced: 2025-10-10T09:59:44.953Z (about 2 months ago)
• Language: JavaScript
• Size: 128 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-refactor - @kashio/vue-tooltip

README

          
# Vue.js tooltip directive

[![NPM](https://nodei.co/npm/@kashio/vue-tooltip.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/@kashio/vue-tooltip/)

[![Build status](https://api.travis-ci.org/Kashio/vue-tooltip.svg?branch=master)](https://travis-ci.org/Kashio/vue-tooltip)

[![Coverage Status](https://coveralls.io/repos/github/Kashio/vue-tooltip/badge.svg?branch=master)](https://coveralls.io/github/Kashio/vue-tooltip?branch=master)

[![Dependency Status](https://david-dm.org/kashio/vue-tooltip.svg)](https://david-dm.org/Kashio/vue-tooltip)

[![devDependency Status](https://david-dm.org/Kashio/vue-tooltip/dev-status.svg)](https://david-dm.org/Kashio/vue-tooltip?type=dev)

## Basic usage

```js

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)

---

## Options

#### Values

* `fade` - Fade speed (`Number` | `String`). Defaults to `slow` (see [jQuery fade values](http://api.jquery.com/fadein/)).

* `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](https://raw.githubusercontent.com/Kashio/vue-tooltip/master/LICENSE).