diff --git a/components/_mixins.scss b/components/_mixins.scss
index c4bc7ee6..6988c672 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -275,3 +275,10 @@
     }
   }
 }
+
+@mixin show-tooltip($duration) {
+  &:hover > [data-react-toolbox='tooltip'] {
+    transition: transform $duration $animation-curve-default;
+    transform: scale(1);
+  }
+}
diff --git a/components/button/style.scss b/components/button/style.scss
index 06fc56c7..58c05743 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -1,5 +1,7 @@
 @import "../base";
+@import "../mixins";
 @import "./config";
+@import "../tooltip/config";
 
 %button {
   position: relative;
@@ -21,9 +23,7 @@
   align-content: center;
   justify-content: center;
 
-  &:hover > [data-react-toolbox='tooltip'] {
-    transform: scale(1);
-  }
+  @include show-tooltip($tooltip-animation-duration)
   &::-moz-focus-inner {
     border: 0;
   }
diff --git a/components/tooltip/style.scss b/components/tooltip/style.scss
index bc23f9aa..dd7fb7bc 100644
--- a/components/tooltip/style.scss
+++ b/components/tooltip/style.scss
@@ -18,11 +18,12 @@
   border-radius: $tooltip-border-radius;
   transform: scale(0);
   transform-origin: top center;
-  transition: transform $tooltip-animation-duration $animation-curve-default;
+  // transition: transform $tooltip-animation-duration $animation-curve-default;
   &.active {
     transform: scale(1);
   }
   &.large {
     font-size: $font-size-small;
+    padding: 2 * $tooltip-padding;
   }
 }
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index 85f652d4..3df61add 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -5,10 +5,10 @@ const ButtonTest = () => (
   <section>
     <h5>Buttons</h5>
     <p>lorem ipsum...</p>
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' tooltip='testing' />
+    <Button kind='raised' primary label='Bookmark' icon='bookmark' tooltip='Bookmark Tooltip' />
     <Button kind='flat' accent label='Inbox' icon='inbox' />
-    <Button kind='floating' primary icon='add' />
-    <Button kind='floating' primary disabled icon='add' />
+    <Button kind='floating' primary icon='add' tooltip='Floating Tooltip' />
+    <Button kind='floating' primary disabled icon='add' tooltip='Floating can not show' />
     <Button kind='floating' accent mini icon='add' />
     <Button kind='flat' primary icon='add' label='Add this' />
     <Button kind='raised' primary label='Bookmark' icon='bookmark' loading />