Easy to use and flexible tooltip directive with vue.js
Vue.js tooltip directive. Easy to use, configure and style.
Vue.js tooltip directive (based on Popper.js)
<span v-tooltip="'my text'">some text</span>
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
Full documentation with examples
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 for bundlers that support the
module field in package.json (Rollup, Webpack 2)
vue-directive-tooltip package includes precompiled production and development UMD builds in the
<script> tag on your page. The UMD builds make
vue-directive-tooltip available as a
window.vueDirectiveTooltip global variable.
The code is available under the MIT license.
We are open to contributions, see CONTRIBUTING.md for more info.
This module was created using generator-module-extended-boilerplate.