http://demo.webjyh.com/vue-tooltips
# or `npm i rollup -g` for short
npm install rollup --global
# install dependencies
npm install
# build for production with minification
npm run build
# npm install
npm install vue-tooltips --save-dev
# or download vue-tooltips.js
https://github.com/webjyh/vue-tooltips/releases
// *.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>
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]);
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 |