| 1 | # vue-directive-tooltip
|
| 2 |
|
| 3 | 
|
| 4 | [](https://www.npmjs.com/package/vue-directive-tooltip)
|
| 5 | [](https://www.npmjs.com/package/vue-directive-tooltip)
|
| 6 | [](https://vuejs.org)
|
| 7 |
|
| 8 | > Vue.js tooltip directive ([based on Popper.js](https://github.com/FezVrasta/popper.js))
|
| 9 |
|
| 10 |
|
| 11 | ### Installation
|
| 12 |
|
| 13 | `yarn add vue-directive-tooltip`
|
| 14 |
|
| 15 | or
|
| 16 |
|
| 17 | `npm install vue-directive-tooltip --save`
|
| 18 |
|
| 19 |
|
| 20 | ### Usage
|
| 21 |
|
| 22 | Super simple
|
| 23 |
|
| 24 | ```html
|
| 25 | <span v-tooltip="'my text'">some text</span>
|
| 26 | ```
|
| 27 |
|
| 28 | A **lot of options** make this tooltip convenient:
|
| 29 |
|
| 30 | - **content**: simple text or use another html tag
|
| 31 | - **positioning** (right, left, ...)
|
| 32 | - **positioning variants**: start | end. ex: bottom.end, top.start, right.end, etc...
|
| 33 | - **delay** to hide (in ms)
|
| 34 | - **offset** (from the target in px)
|
| 35 | - choose from **several triggers** (hover, focus, click)
|
| 36 | - **full programmatic**, you choose when to show/hide the tooltip
|
| 37 | - and of course, use your **custom CSS** class
|
| 38 |
|
| 39 |
|
| 40 | ### Documentation
|
| 41 |
|
| 42 | [Full documentation with examples](https://hekigan.github.io/vue-directive-tooltip/)
|
| 43 |
|
| 44 | [<img src="https://hekigan.github.io/vue-directive-tooltip/img/screenshot.jpg">](https://hekigan.github.io/vue-directive-tooltip/)
|
| 45 |
|
| 46 | ### Builds
|
| 47 |
|
| 48 | 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.
|
| 49 |
|
| 50 | `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)
|
| 51 |
|
| 52 | 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 [`<script>` tag](https://unpkg.com/vue-directive-tooltip) on your page. The UMD builds make `vue-directive-tooltip` available as a `window.vueDirectiveTooltip` global variable.
|
| 53 |
|
| 54 | ### License
|
| 55 |
|
| 56 | The code is available under the [MIT](LICENSE) license.
|
| 57 |
|
| 58 | ### Contributing
|
| 59 |
|
| 60 | We are open to contributions, see [CONTRIBUTING.md](CONTRIBUTING.md) for more info.
|
| 61 |
|
| 62 | ### Misc
|
| 63 |
|
| 64 | This module was created using [generator-module-extended-boilerplate](https://github.com/hekigan/generator-module-extended-boilerplate).
|