vue-directive-tooltip-alt v1.0.2
vue-directive-tooltip
Vue.js tooltip directive (based on Popper.js)
Usage
// ES6
import Tooltip from 'vue-directive-tooltip';
Vue.use(Tooltip);
// ES5
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.