diff --git a/app.json b/app.json
index 8ce335c1..610944d0 100644
--- a/app.json
+++ b/app.json
@@ -7,7 +7,8 @@
     "pages/label/index",
     "pages/loadmore/index",
     "pages/panel/index",
-    "pages/tab/index"
+    "pages/tab/index",
+    "pages/toptips/index"
   ],
   "window":{
     "navigationBarBackgroundColor": "#FAFAFA",
diff --git a/pages/dashboard/index.wxml b/pages/dashboard/index.wxml
index e66910df..96d9705a 100644
--- a/pages/dashboard/index.wxml
+++ b/pages/dashboard/index.wxml
@@ -25,10 +25,14 @@
       <view class="zui-cell__bd">Tab</view>
       <view class="zui-cell__ft"></view>
     </navigator>
-    <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/label/index">
+    <navigator class="zui-cell zui-cell--access" url="/pages/label/index">
       <view class="zui-cell__bd">Label</view>
       <view class="zui-cell__ft"></view>
     </navigator>
+    <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/toptips/index">
+      <view class="zui-cell__bd">Toptips</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
   </view>
 
 </view>
diff --git a/pages/toptips/index.js b/pages/toptips/index.js
new file mode 100644
index 00000000..911d0e70
--- /dev/null
+++ b/pages/toptips/index.js
@@ -0,0 +1,9 @@
+var topTips = require('../../zui/toptips/index');
+
+Page(Object.assign({}, topTips, {
+  data: {},
+
+  showTopTips() {
+    this.showZuiTopTips('哎呀，出了点小问题');
+  }
+}));
diff --git a/pages/toptips/index.wxml b/pages/toptips/index.wxml
new file mode 100644
index 00000000..ab058f0a
--- /dev/null
+++ b/pages/toptips/index.wxml
@@ -0,0 +1,7 @@
+<import src="/zui/toptips/index.wxml" />
+
+<view class="container">
+  <button class="zui-btn zui-btn--primary zui-btn--big" catchtap="showTopTips">显示toptips</button>
+</view>
+
+<template is="zui-toptips" data="{{ componentTopTips }}"></template>
diff --git a/zui/index.wxss b/zui/index.wxss
index 8fd5a08a..8a66f808 100644
--- a/zui/index.wxss
+++ b/zui/index.wxss
@@ -13,3 +13,4 @@
 @import "quantity/index.wxss";
 @import "steps/index.wxss";
 @import "toast/index.wxss";
+@import "toptips/index.wxss";
diff --git a/zui/toptips/index.js b/zui/toptips/index.js
new file mode 100644
index 00000000..df71ede9
--- /dev/null
+++ b/zui/toptips/index.js
@@ -0,0 +1,38 @@
+var timer = undefined;
+
+module.exports = {
+  showZuiTopTips(content = '', options = {}) {
+    // 如果已经有一个计时器在了，就清理掉先
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    if (typeof options === 'number') {
+      options = {
+        duration: options
+      };
+    }
+
+    // options参数默认参数扩展
+    options = Object.assign({
+      duration: 3000
+    }, options);
+
+    // 展示出topTips
+    this.setData({
+      componentTopTips: {
+        show: true,
+        content,
+        options
+      }
+    });
+
+    // 设置定时器，定时关闭topTips
+    timer = setTimeout(() => {
+      this.setData({
+        'componentTopTips.show': false
+      });
+      timer = undefined;
+    }, options.duration);
+  }
+};
diff --git a/zui/toptips/index.wxml b/zui/toptips/index.wxml
new file mode 100644
index 00000000..1ec925d8
--- /dev/null
+++ b/zui/toptips/index.wxml
@@ -0,0 +1,3 @@
+<template name="zui-toptips">
+  <view class="zui-toptips {{ componentTopTips.show ? 'zui-toptips--show' : '' }}">{{ componentTopTips.content }}</view>
+</template>
diff --git a/zui/toptips/index.wxss b/zui/toptips/index.wxss
new file mode 100644
index 00000000..6d3c2c3e
--- /dev/null
+++ b/zui/toptips/index.wxss
@@ -0,0 +1,20 @@
+.zui-toptips {
+  display: block;
+  position: fixed;
+  -webkit-transform: translateZ(0) translateY(-100%);
+  width: 100%;
+  top: 0;
+  line-height: 2.3;
+  font-size: 14px;
+  text-align: center;
+  color: #FFF;
+  background-color: #E64340;
+  z-index: 2;
+
+  /* 动画部分 */
+  transition: all 0.4s ease;
+}
+
+.zui-toptips--show {
+  -webkit-transform: translateZ(0) translateY(0);
+}