pyttroll / vue-directive-tooltip

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

Home Page:

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


Node NPM NPM Downloads/month Vue.js

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


Super simple

<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 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.


The code is available under the MIT license.


We are open to contributions, see for more info.


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

ezoic increase your site revenue


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

License:MIT License


Language:JavaScript 57.5%Language:HTML 32.9%Language:CSS 9.5%