diff --git a/examples/routers/notice.vue b/examples/routers/notice.vue
index 43cc2a4e..f154d914 100644
--- a/examples/routers/notice.vue
+++ b/examples/routers/notice.vue
@@ -1,39 +1,43 @@
 <template>
-    <Select v-model="model1" style="width:200px">
-        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-    </Select>
+    <div>
+        <p>With desc</p>
+        <Button @click="info(false)">Info</Button>
+        <Button @click="success(false)">Success</Button>
+        <Button @click="warning(false)">Warning</Button>
+        <Button @click="error(false)">Error</Button>
+        <p>Only title</p>
+        <Button @click="info(true)">Info</Button>
+        <Button @click="success(true)">Success</Button>
+        <Button @click="warning(true)">Warning</Button>
+        <Button @click="error(true)">Error</Button>
+    </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                cityList: [
-                    {
-                        value: 'New York',
-                        label: 'New York'
-                    },
-                    {
-                        value: 'London',
-                        label: 'London'
-                    },
-                    {
-                        value: 'Sydney',
-                        label: 'Sydney'
-                    },
-                    {
-                        value: 'Ottawa',
-                        label: 'Ottawa'
-                    },
-                    {
-                        value: 'Paris',
-                        label: 'Paris'
-                    },
-                    {
-                        value: 'Canberra',
-                        label: 'Canberra'
-                    }
-                ],
-                model1: 'Sydney'
+        methods: {
+            info (nodesc) {
+                this.$Notice.info({
+                    title: 'Notification title',
+                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
+                });
+            },
+            success (nodesc) {
+                this.$Notice.success({
+                    title: 'Notification title',
+                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
+                });
+            },
+            warning (nodesc) {
+                this.$Notice.warning({
+                    title: 'Notification title',
+                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
+                });
+            },
+            error (nodesc) {
+                this.$Notice.error({
+                    title: 'Notification title',
+                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
+                });
             }
         }
     }
diff --git a/examples/routers/tooltip.vue b/examples/routers/tooltip.vue
index f3935fa3..18187df7 100644
--- a/examples/routers/tooltip.vue
+++ b/examples/routers/tooltip.vue
@@ -1,28 +1,70 @@
+<style scoped>
+    .top,.bottom{
+        text-align: center;
+    }
+    .center{
+        width: 300px;
+        margin: 10px auto;
+        overflow: hidden;
+    }
+    .center-left{
+        float: left;
+    }
+    .center-right{
+        float: right;
+    }
+</style>
 <template>
-    <div style="margin: 200px;">
-        <Tooltip always placement="top-end" :content="text" :delay="1000" theme="light">
-            <Button @click="disabled = true">延时1秒显示</Button>
-        </Tooltip>
-        <Tooltip always :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
-            <Button @click="handleChange">change</Button>
-        </Tooltip>
-        <Button @click="handleChange">change</Button>
-        <Poptip title="Title" padding="0" width="250" word-wrap content="我的文本超级，无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
-            <Button>Click</Button>
-        </Poptip>
+    <div>
+        <div class="top">
+            <Tooltip content="Top Left text" placement="top-start">
+                <Button>Top Left</Button>
+            </Tooltip>
+            <Tooltip content="Top Center text" placement="top">
+                <Button>Top Center</Button>
+            </Tooltip>
+            <Tooltip content="Top Right text" placement="top-end">
+                <Button>Top Right</Button>
+            </Tooltip>
+        </div>
+        <div class="center">
+            <div class="center-left">
+                <Tooltip content="Left Top text" placement="left-start">
+                    <Button>Left Top</Button>
+                </Tooltip><br><br>
+                <Tooltip content="Left Center text" placement="left">
+                    <Button>Left Center</Button>
+                </Tooltip><br><br>
+                <Tooltip content="Left Bottom text" placement="left-end">
+                    <Button>Left Bottom</Button>
+                </Tooltip>
+            </div>
+            <div class="center-right">
+                <Tooltip content="Right Top text" placement="right-start">
+                    <Button>Right Top</Button>
+                </Tooltip><br><br>
+                <Tooltip content="Right Center text" placement="right">
+                    <Button>Right Center</Button>
+                </Tooltip><br><br>
+                <Tooltip content="Right Bottom text" placement="right-end">
+                    <Button>Right Bottom</Button>
+                </Tooltip>
+            </div>
+        </div>
+        <div class="bottom">
+            <Tooltip content="Bottom Left text" placement="bottom-start">
+                <Button>Bottom Left</Button>
+            </Tooltip>
+            <Tooltip content="Bottom Center text" placement="bottom">
+                <Button>Bottom Center</Button>
+            </Tooltip>
+            <Tooltip content="Bottom Right text" placement="bottom-end">
+                <Button>Bottom Right</Button>
+            </Tooltip>
+        </div>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                text: 'Tooltip 文字提示'
-            };
-        },
-        methods: {
-            handleChange () {
-                this.text = '提示'
-            }
-        }
     }
 </script>
diff --git a/src/styles/animation/fade.less b/src/styles/animation/fade.less
index ca83171d..42391aa9 100644
--- a/src/styles/animation/fade.less
+++ b/src/styles/animation/fade.less
@@ -1,5 +1,5 @@
 .fade-motion(@className, @keyframeName) {
-    .make-motion(@className, @keyframeName);
+    .make-motion(@className, @keyframeName, @animation-time-quick);
     .@{className}-enter-active, .@{className}-appear {
         opacity: 0;
         animation-timing-function: linear;
@@ -27,4 +27,4 @@
     100% {
         opacity: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/src/styles/animation/index.less b/src/styles/animation/index.less
index 116f9b69..016b7a1f 100644
--- a/src/styles/animation/index.less
+++ b/src/styles/animation/index.less
@@ -1,15 +1,15 @@
-.motion-common() {
-    animation-duration: @animation-time;
+.motion-common(@time) {
+    animation-duration: @time;
     animation-fill-mode: both;
 }
 
-.make-motion(@className, @keyframeName) {
+.make-motion(@className, @keyframeName, @time: @animation-time) {
     .@{className}-enter-active, .@{className}-appear {
-        .motion-common();
+        .motion-common(@time);
         animation-play-state: paused;
     }
     .@{className}-leave-active {
-        .motion-common();
+        .motion-common(@time);
         animation-play-state: paused;
     }
     .@{className}-enter-active, .@{className}-appear {
@@ -29,4 +29,4 @@
 
 .collapse-transition {
     transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
-}
\ No newline at end of file
+}
diff --git a/src/styles/custom.less b/src/styles/custom.less
index 904eba7e..b7ba7d3c 100644
--- a/src/styles/custom.less
+++ b/src/styles/custom.less
@@ -198,6 +198,7 @@
 
 // Animation
 @animation-time         : .3s;
+@animation-time-quick   : .15s;
 @transition-time        : .2s;
 @ease-in-out            : ease-in-out;