From 487eb83bf7dd609316700f717f862f6b4d9e7493 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Fri, 25 Nov 2016 19:13:12 -0200
Subject: [PATCH] create tooltip documentation with the new template

---
 docs/src/pages/components/Tooltip.vue  | 224 +++++++++++++++----------
 src/components/mdTable/mdTable.scss    |   2 +-
 src/components/mdTooltip/mdTooltip.vue |  21 ++-
 3 files changed, 145 insertions(+), 102 deletions(-)

diff --git a/docs/src/pages/components/Tooltip.vue b/docs/src/pages/components/Tooltip.vue
index a289d2e..008ffa6 100644
--- a/docs/src/pages/components/Tooltip.vue
+++ b/docs/src/pages/components/Tooltip.vue
@@ -1,113 +1,153 @@
 <template>
-  <demo-page label="Components - Tooltip">
-    <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>
+  <page-content page-title="Components - Tooltip">
+    <docs-component>
+      <div slot="description">
+        <p>Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.</p>
+      </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 slot="api">
+        <api-table name="md-tooltip">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
 
-        <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-table-body>
+              <md-table-row>
+                <md-table-cell>md-direction</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Sets the direction position of the parent element. <br>Default: <code>bottom</code> <br>Accepts: <code>top</code>|<code>right</code>|<code>bottom</code>|<code>left</code></md-table-cell>
+              </md-table-row>
 
-          <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-table-row>
+                <md-table-cell>md-delay</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Sets the delay to show the tooltip in ms. <br>Default: <code>0</code></md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
 
-      <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>
+      <div slot="example">
+        <example-box card-title="Default">
+          <div slot="demo">
+            <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-delay="400" 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-delay="400" 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-delay="400" md-direction="right">My tooltip</md-tooltip>
-          </md-avatar>
-        </div>
-      </demo-example>
-    </div>
+              <md-avatar class="md-avatar-icon">
+                <md-icon>person</md-icon>
+                <md-tooltip md-direction="right">My tooltip</md-tooltip>
+              </md-avatar>
+            </div>
+          </div>
 
-    <div slot="code">
-      <demo-example label="Default">
-        <code-block lang="xml">
-&lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
-  &lt;md-icon&gt;folder&lt;/md-icon&gt;
-  &lt;md-tooltip md-direction=&quot;top&quot;&gt;My tooltip&lt;/md-tooltip&gt;
-&lt;/md-button&gt;
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div&gt;
+                &lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
+                  &lt;md-icon&gt;folder&lt;/md-icon&gt;
+                  &lt;md-tooltip md-direction=&quot;top&quot;&gt;My tooltip&lt;/md-tooltip&gt;
+                &lt;/md-button&gt;
 
-&lt;md-avatar&gt;
-  &lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
-  &lt;md-tooltip md-direction=&quot;bottom&quot;&gt;My tooltip&lt;/md-tooltip&gt;
-&lt;/md-avatar&gt;
+                &lt;md-avatar&gt;
+                  &lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
+                  &lt;md-tooltip md-direction=&quot;bottom&quot;&gt;My tooltip&lt;/md-tooltip&gt;
+                &lt;/md-avatar&gt;
+              &lt;/div&gt;
 
-&lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
-  &lt;md-icon&gt;home&lt;/md-icon&gt;
-  &lt;md-tooltip md-direction=&quot;left&quot;&gt;My tooltip&lt;/md-tooltip&gt;
-&lt;/md-button&gt;
+              &lt;div&gt;
+                &lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
+                  &lt;md-icon&gt;home&lt;/md-icon&gt;
+                  &lt;md-tooltip md-direction=&quot;left&quot;&gt;My tooltip&lt;/md-tooltip&gt;
+                &lt;/md-button&gt;
 
-&lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
-  &lt;md-icon&gt;person&lt;/md-icon&gt;
-  &lt;md-tooltip md-direction=&quot;right&quot;&gt;My tooltip&lt;/md-tooltip&gt;
-&lt;/md-avatar&gt;
-        </code-block>
-      </demo-example>
+                &lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
+                  &lt;md-icon&gt;person&lt;/md-icon&gt;
+                  &lt;md-tooltip md-direction=&quot;right&quot;&gt;My tooltip&lt;/md-tooltip&gt;
+                &lt;/md-avatar&gt;
+              &lt;/div&gt;
+            </code-block>
+          </div>
+        </example-box>
 
-      <demo-example label="Delay - 400ms">
-        <code-block lang="xml">
-&lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
-  &lt;md-icon&gt;folder&lt;/md-icon&gt;
-  &lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;top&quot;&gt;My tooltip&lt;/md-tooltip&gt;
-&lt;/md-button&gt;
+        <example-box card-title="Delay">
+          <div slot="demo">
+            <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>
 
-&lt;md-avatar&gt;
-  &lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
-  &lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;bottom&quot;&gt;My tooltip&lt;/md-tooltip&gt;
-&lt;/md-avatar&gt;
+              <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>
 
-&lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
-  &lt;md-icon&gt;home&lt;/md-icon&gt;
-  &lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;left&quot;&gt;My tooltip&lt;/md-tooltip&gt;
-&lt;/md-button&gt;
+            <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>
 
-&lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
-  &lt;md-icon&gt;person&lt;/md-icon&gt;
-  &lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;right&quot;&gt;My tooltip&lt;/md-tooltip&gt;
-&lt;/md-avatar&gt;
-        </code-block>
-      </demo-example>
-    </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>
+          </div>
 
-    <div slot="api">
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div&gt;
+                &lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
+                  &lt;md-icon&gt;folder&lt;/md-icon&gt;
+                  &lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;top&quot;&gt;My tooltip&lt;/md-tooltip&gt;
+                &lt;/md-button&gt;
 
-    </div>
-  </demo-page>
+                &lt;md-avatar&gt;
+                  &lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
+                  &lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;bottom&quot;&gt;My tooltip&lt;/md-tooltip&gt;
+                &lt;/md-avatar&gt;
+              &lt;/div&gt;
+
+              &lt;div&gt;
+                &lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
+                  &lt;md-icon&gt;home&lt;/md-icon&gt;
+                  &lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;left&quot;&gt;My tooltip&lt;/md-tooltip&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
+                  &lt;md-icon&gt;person&lt;/md-icon&gt;
+                  &lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;right&quot;&gt;My tooltip&lt;/md-tooltip&gt;
+                &lt;/md-avatar&gt;
+              &lt;/div&gt;
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/mdTable/mdTable.scss b/src/components/mdTable/mdTable.scss
index fba3c35..1823867 100644
--- a/src/components/mdTable/mdTable.scss
+++ b/src/components/mdTable/mdTable.scss
@@ -165,7 +165,7 @@
     }
 
     .md-table-cell-container {
-      padding: 0 32px 0 24px;
+      padding: 6px 32px 6px 24px;
     }
 
     .md-button {
diff --git a/src/components/mdTooltip/mdTooltip.vue b/src/components/mdTooltip/mdTooltip.vue
index 56257d6..551b8c1 100644
--- a/src/components/mdTooltip/mdTooltip.vue
+++ b/src/components/mdTooltip/mdTooltip.vue
@@ -117,16 +117,19 @@
       },
       open() {
         this.removeTooltips();
-        this.rootElement.appendChild(this.tooltipElement);
-        getComputedStyle(this.tooltipElement).top;
-        this.transitionOff = true;
-        this.generateTooltipClasses();
-        this.calculateTooltipPosition();
 
-        window.setTimeout(() => {
-          this.transitionOff = false;
-          this.active = true;
-        }, 10);
+        this.$nextTick(() => {
+          this.rootElement.appendChild(this.tooltipElement);
+          getComputedStyle(this.tooltipElement).top;
+          this.transitionOff = true;
+          this.generateTooltipClasses();
+          this.calculateTooltipPosition();
+
+          window.setTimeout(() => {
+            this.transitionOff = false;
+            this.active = true;
+          }, 10);
+        });
       },
       close() {
         let cleanupElements = () => {