Fix parent detection on tooltips

src/components/mdTooltip/mdTooltip.scss

@@ -12,6 +12,7 @@ $tooltip-height: 20px;
   opacity: 0;
   transform-origin: center top;
   transition: $swift-ease-out;
+  transition-duration: .3s;
   transition-delay: 0s;
   color: #fff;
   font-family: $font-roboto;
@@ -23,6 +24,7 @@ $tooltip-height: 20px;
   &.md-active {
     opacity: 1;
     transition: $swift-ease-in;
+    transition-duration: .3s;
   }
 
   &.md-tooltip-top {

src/components/mdTooltip/mdTooltip.vue

@@ -12,7 +12,7 @@
   let targetElement;
 
   let calculateTooltipPosition = (scope) => {
-    let position = scope.$parent.$el.getBoundingClientRect();
+    let position = scope.targetElement.getBoundingClientRect();
 
     switch (scope.mdDirection) {
       case 'top':
@@ -85,6 +85,8 @@
       let tooltipElement = this.$el;
       let targetElement = tooltipElement.parentNode;
 
+      this.targetElement = targetElement;
+
       onMouseEnter = () => {
         document.body.appendChild(tooltipElement);
         calculateTooltipPosition(this);
@@ -105,6 +107,14 @@
         tooltipElement.addEventListener('transitionend', onTransitionEnd);
       };
 
+      if (this.$parent.$el.classList === targetElement.classList) {
+        targetElement.classList.forEach((cssClass) => {
+          if (cssClass.indexOf('md-') >= 0 && cssClass !== 'md-active') {
+            tooltipElement.classList.add(cssClass + '-tooltip');
+          }
+        });
+      }
+
       this.$el.parentNode.removeChild(this.$el);
 
       targetElement.addEventListener('mouseenter', onMouseEnter);

src/docs/pages/Avatar.vue

@@ -17,11 +17,3 @@
     </md-avatar>
   </section>
 </template>
-
-<script>
-  export default {
-    ready() {
-
-    }
-  };
-</script>

src/docs/pages/Checkbox.vue

@@ -25,8 +25,6 @@
     <div v-md-theme="'teal'">
       <md-checkbox id="my-test5" name="my-test5" v-model="checkbox" disabled>Disabled</md-checkbox>
     </div>
-
-    <span>{{ checkbox }}</span>
   </section>
 </template>
 

src/docs/pages/Tooltip.vue

@@ -67,6 +67,5 @@
   .md-button,
   .md-avatar {
     margin: 24px;
-    overflow: visible;
   }
 </style>