https://github.com/hekigan/vue-directive-tooltip

Vue.js tooltip directive. Easy to use, configure and style
https://github.com/hekigan/vue-directive-tooltip

directive tooltip vue vue2

Last synced: 3 months ago
JSON representation

Vue.js tooltip directive. Easy to use, configure and style

• Host: GitHub
• URL: https://github.com/hekigan/vue-directive-tooltip
• Owner: hekigan
• License: mit
• Created: 2017-04-14T14:28:12.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T06:48:31.000Z (almost 2 years ago)
• Last Synced: 2024-07-10T19:18:02.029Z (4 months ago)
• Topics: directive, tooltip, vue, vue2
• Language: Vue
• Homepage: https://hekigan.github.io/vue-directive-tooltip/
• Size: 3.97 MB
• Stars: 174
• Watchers: 8
• Forks: 33
• Open Issues: 52
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-directive-tooltip

![Node](https://img.shields.io/node/v/vue-directive-tooltip.svg?style=flat-square)

[![NPM](https://img.shields.io/npm/v/vue-directive-tooltip.svg?style=flat-square)](https://www.npmjs.com/package/vue-directive-tooltip)

[![NPM Downloads/month](https://img.shields.io/npm/dm/vue-directive-tooltip.svg?style=flat-square)](https://www.npmjs.com/package/vue-directive-tooltip)

[![Vue.js](https://img.shields.io/badge/vue-2-green.svg)](https://vuejs.org)

> Vue.js tooltip directive ([based on Popper.js](https://github.com/FezVrasta/popper.js))

### Installation

`yarn add vue-directive-tooltip`

or

`npm install vue-directive-tooltip --save`

### Usage

Super simple

```html

some text

```

A **lot of options** make this tooltip convenient:

- **content**: simple text or use another html tag

- **positioning** (right, left, ...)

- **positioning variants**: start | end. ex: bottom.end, top.start, right.end, etc...

- **delay** to hide (in ms)

- **offset** (from the target in px)

- choose from **several triggers** (hover, focus, click)

- **full programmatic**, you choose when to show/hide the tooltip

- and of course, use your **custom CSS** class

### Documentation

[Full documentation with examples](https://hekigan.github.io/vue-directive-tooltip/)

[](https://hekigan.github.io/vue-directive-tooltip/)

### Builds

If you don't use a package manager, you can [access `vue-directive-tooltip` via unpkg (CDN)](https://unpkg.com/vue-directive-tooltip/), download the source, or point your package manager to the url.

`vue-directive-tooltip` is compiled as a collection of [CommonJS](http://webpack.github.io/docs/commonjs.html) modules & [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html) for bundlers that support the `jsnext:main` or `module` field in package.json (Rollup, Webpack 2)

The `vue-directive-tooltip` package includes precompiled production and development [UMD](https://github.com/umdjs/umd) builds in the [`dist` folder](https://unpkg.com/vue-directive-tooltip/dist/). They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a [`` tag](https://unpkg.com/vue-directive-tooltip) on your page. The UMD builds make `vue-directive-tooltip` available as a `window.vueDirectiveTooltip` global variable.

### License

The code is available under the [MIT](LICENSE) license.

### Contributing

We are open to contributions, see [CONTRIBUTING.md](CONTRIBUTING.md) for more info.

### Misc

This module was created using [generator-module-extended-boilerplate](https://github.com/hekigan/generator-module-extended-boilerplate).