Vue-Tooltips Vue 2.x

English | 中文

Demo

http://demo.webjyh.com/vue-tooltips

Build

# or `npm i rollup -g` for short
npm install rollup --global

# install dependencies
npm install

# build for production with minification
npm run build

Install

# npm install
npm install vue-tooltips --save-dev

# or download vue-tooltips.js
https://github.com/webjyh/vue-tooltips/releases

Use

// *.vue file
import Vue from 'vue';
import 'vue-tooltips/dist/tooltips.css';
import Tooltips from 'vue-tooltips';

Vue.use(Tooltips);

export default {
    data() {
        return {}
    },
    mounted() {
        this.$tooltips('vue-Tooltips !!!');
    }
}

*.js file

<!-- css -->
<link rel="stylesheet" href="dist/tooltips.css">

<!-- js -->
<script src="//cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="dist/tooltips.min.js"></script>
<script>
new Vue({
    el: '#app',
    data: function() {
        return {}
    },
    mounted: function() {
        this.$tooltips('vue-Tooltips !!!');
    }
});
</script>

Example

this.$tooltips('Tooltips !!!');

// set duration
this.$tooltips('Tooltips !!!', 5000);

// set Options
this.$tooltips('Tooltips !!!', {
    type: 'danger',
    duration: 3000,
    callback: function() {
        alert(1);
    }
});

/* type = 'success' */
this.$tooltips.success(msg, [, options]);

/* type = 'warning' */
this.$tooltips.warning(msg, [, options]);

/* type = 'danger' */
this.$tooltips.error(msg, [, options]);

Options

Attribute | Default | Type | Description ------- | ------ | ---- | -------- type | success | {String} | message type default, success, warning, danger duration | 3000 | {Number} | display duration, millisecond. default 3000 ms. callback | function() | {Function} | callback function when closed with the message instance as the parameter

Author

M.J