vue-directive-tooltip

Vue.js tooltip directive (based on Popper.js)

Usage

import Tooltip from 'vue-directive-tooltip';
// or require('vue-directive-tooltip');

<span v-tooltip="'my text'">some text</span>

It is recommended to also add the CSS file which is in the ./css/ folder. A SASS file is also included in the source for those who prefer fiddling.

Installation

Install via yarn

yarn add vue-directive-tooltip (--dev)

or npm

npm install vue-directive-tooltip (--save-dev)

configuration

<span v-tooltip="'my text'">some text</span>

or

<span v-tooltip="{content: 'my text'}">some text</span>

modifier
📝 Change the position of the tooltip
ℹ️ options: bottom (default) | top | left | right
💡 example

<span v-tooltip.top="'my text'">some text</span>

content
📝 Set the text to display
💡 example

<span v-tooltip="{ content: 'my text' }">some text</span>

class
📝 Append custom CSS class
💡 example

<span v-tooltip="{ class: 'custom-class other-custom-class' }">some text</span>

visible
📝 Show/hide the tooltip
ℹ️ options: true (default) | false
💡 example

<span v-tooltip="{ content: 'my text', visible: true }">some text</span>

Examples

See example folder.

Builds

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

vue-directive-tooltip is compiled as a collection of CommonJS modules & [ES2015 modules](http://www.2ality.com/2014/0 -9/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 builds in the dist folder. 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 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.

Contributing

We are open to contributions, see CONTRIBUTING.md for more info.

Misc

This module was created using generator-module-extended-boilerplate.