From 886b1a669022514a246275fc3cd026e225f53064 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 19 Sep 2016 20:35:30 -0300
Subject: [PATCH] Update tooltip examples and fix tooltip z-index

---
 src/components/mdTooltip/mdTooltip.scss |   5 ++
 src/docs/pages/Tooltip.vue              | 115 +++++++++++++-----------
 2 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/src/components/mdTooltip/mdTooltip.scss b/src/components/mdTooltip/mdTooltip.scss
index 9ce2e73..f3e6ecb 100644
--- a/src/components/mdTooltip/mdTooltip.scss
+++ b/src/components/mdTooltip/mdTooltip.scss
@@ -6,6 +6,7 @@ $tooltip-height: 20px;
   height: $tooltip-height;
   padding: 0 8px;
   position: fixed;
+  z-index: 200;
   pointer-events: none;
   background-color: rgba(#616161, .87);
   border-radius: 2px;
@@ -27,6 +28,10 @@ $tooltip-height: 20px;
     transition-duration: .3s;
   }
 
+  &:not(.md-active) {
+    transition-delay: 0s !important;
+  }
+
   &.md-tooltip-top {
     margin-top: -14px;
     transform: translate(-50%, 8px);
diff --git a/src/docs/pages/Tooltip.vue b/src/docs/pages/Tooltip.vue
index 8caa4f7..c1385d9 100644
--- a/src/docs/pages/Tooltip.vue
+++ b/src/docs/pages/Tooltip.vue
@@ -1,71 +1,80 @@
 <template>
-  <div>
-    <section>
-      <h2 class="title">Tooltip</h2>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Default">
+        <div>
+          <md-button class="md-icon-button md-raised md-primary">
+            <md-icon>folder</md-icon>
+            <md-tooltip md-direction="top">My tooltip</md-tooltip>
+          </md-button>
 
-      <div>
-        <md-button class="md-icon-button md-raised md-primary">
-          <md-icon>folder</md-icon>
-          <md-tooltip md-direction="top">My tooltip</md-tooltip>
-        </md-button>
+          <md-avatar>
+            <img src="https://placeimg.com/40/40/people/1" alt="People">
+            <md-tooltip md-direction="bottom">My tooltip</md-tooltip>
+          </md-avatar>
+        </div>
 
-        <md-avatar>
-          <img src="https://placeimg.com/40/40/people/1" alt="People">
-          <md-tooltip md-direction="bottom">My tooltip</md-tooltip>
-        </md-avatar>
-      </div>
+        <div>
+          <md-button class="md-icon-button md-raised md-warn">
+            <md-icon>home</md-icon>
+            <md-tooltip md-direction="left">My tooltip</md-tooltip>
+          </md-button>
 
-      <div>
-        <md-button class="md-icon-button md-raised md-warn">
-          <md-icon>home</md-icon>
-          <md-tooltip md-direction="left">My tooltip</md-tooltip>
-        </md-button>
+          <md-avatar class="md-avatar-icon">
+            <md-icon>person</md-icon>
+            <md-tooltip md-direction="right">My tooltip</md-tooltip>
+          </md-avatar>
+        </div>
+      </demo-example>
 
-        <md-avatar class="md-avatar-icon">
-          <md-icon>person</md-icon>
-          <md-tooltip md-direction="right">My tooltip</md-tooltip>
-        </md-avatar>
-      </div>
-    </section>
+      <demo-example label="Delay - 400ms">
+        <div>
+          <md-button class="md-icon-button md-raised md-primary">
+            <md-icon>folder</md-icon>
+            <md-tooltip md-delay="400" md-direction="top">My tooltip</md-tooltip>
+          </md-button>
 
-    <section>
-      <h2 class="title">Tooltip - Delay</h2>
+          <md-avatar>
+            <img src="https://placeimg.com/40/40/people/1" alt="People">
+            <md-tooltip md-delay="400" md-direction="bottom">My tooltip</md-tooltip>
+          </md-avatar>
+        </div>
 
-      <div>
-        <md-button class="md-icon-button md-raised md-primary">
-          <md-icon>folder</md-icon>
-          <md-tooltip md-delay="500" md-direction="top">My tooltip</md-tooltip>
-        </md-button>
+        <div>
+          <md-button class="md-icon-button md-raised md-warn">
+            <md-icon>home</md-icon>
+            <md-tooltip md-delay="400" md-direction="left">My tooltip</md-tooltip>
+          </md-button>
 
-        <md-avatar>
-          <img src="https://placeimg.com/40/40/people/1" alt="People">
-          <md-tooltip md-delay="500" md-direction="bottom">My tooltip</md-tooltip>
-        </md-avatar>
-      </div>
+          <md-avatar class="md-avatar-icon">
+            <md-icon>person</md-icon>
+            <md-tooltip md-delay="400" md-direction="right">My tooltip</md-tooltip>
+          </md-avatar>
+        </div>
+      </demo-example>
+    </div>
 
-      <div>
-        <md-button class="md-icon-button md-raised md-warn">
-          <md-icon>home</md-icon>
-          <md-tooltip md-delay="500" md-direction="left">My tooltip</md-tooltip>
-        </md-button>
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
 
-        <md-avatar class="md-avatar-icon">
-          <md-icon>person</md-icon>
-          <md-tooltip md-delay="500" md-direction="right">My tooltip</md-tooltip>
-        </md-avatar>
-      </div>
-    </section>
-  </div>
+    <div slot="api">
+
+    </div>
+  </demo-page>
 </template>
 
 <style lang="scss" scoped>
-  section {
-    margin-left: 100px;
-    margin-bottom: 32px;
-  }
-
   .md-button,
   .md-avatar {
     margin: 24px;
   }
 </style>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Tooltip';
+    }
+  };
+</script>