Skip to content
Vue.js tooltip directive. Easy to use, configure and style
Branch: master
Clone or download
Latest commit 2d4d9ed Mar 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
css 🔖 v1.5.0 Sep 27, 2018
docs
example
src - performance fix: when having a big number of tooltips on a page, th… Mar 18, 2019
.babelrc
.editorconfig
.eslintignore
.eslintrc initial commit Apr 14, 2017
.gitignore
.release.json initial commit Apr 14, 2017
.travis.yml initial commit Apr 14, 2017
CONTRIBUTING.md initial commit Apr 14, 2017
LICENSE
README.md
_config.yml Set theme jekyll-theme-cayman Apr 16, 2017
package.json 🔖 v1.5.1 Mar 19, 2019
rollup.config.js 🔖 v1.0.0 Apr 14, 2017
yarn.lock

README.md

vue-directive-tooltip

Node NPM NPM Downloads/month Vue.js

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

Usage

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

Documentation

Full documentation with examples

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

You can’t perform that action at this time.