https://github.com/webjyh/vue-tooltips
依赖于 Vue2.x 的简单简洁的信息提示框，支持移动端。
https://github.com/webjyh/vue-tooltips
tooltips vue-component vue-plugin vue-tooltips
Last synced: 4 months ago
JSON representation
依赖于 Vue2.x 的简单简洁的信息提示框，支持移动端。
- Host: GitHub
- URL: https://github.com/webjyh/vue-tooltips
- Owner: webjyh
- License: mit
- Created: 2017-07-06T09:06:58.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-03-19T03:35:47.000Z (over 7 years ago)
- Last Synced: 2025-10-21T17:49:38.353Z (8 months ago)
- Topics: tooltips, vue-component, vue-plugin, vue-tooltips
- Language: HTML
- Homepage: http://demo.webjyh.com/vue-tooltips
- Size: 15.6 KB
- Stars: 5
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue-Tooltips Vue 2.x
### [English](https://github.com/webjyh/vue-tooltips) | [中文](https://github.com/webjyh/vue-tooltips/blob/master/README.zh_CN.md)
### Demo
http://demo.webjyh.com/vue-tooltips
### Build
``` bash
# or `npm i rollup -g` for short
npm install rollup --global
# install dependencies
npm install
# build for production with minification
npm run build
```
### Install
``` bash
# npm install
npm install vue-tooltips --save-dev
# or download vue-tooltips.js
https://github.com/webjyh/vue-tooltips/releases
```
### Use
```javascript
// *.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 !!!');
}
}
```
```html
*.js file
new Vue({
el: '#app',
data: function() {
return {}
},
mounted: function() {
this.$tooltips('vue-Tooltips !!!');
}
});
```
### Example
```javascript
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](http://webjyh.com)