Add numeric style to table head and add tooltip

docs/src/pages/components/Table.vue

@@ -18,7 +18,7 @@
             <thead>
               <md-table-row>
                 <md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
-                <md-table-head md-sort-by="calories" md-numeric>Calories (g)</md-table-head>
+                <md-table-head md-sort-by="calories" md-numeric md-tooltip="The total amount of food energy and the given serving size">Calories (g)</md-table-head>
                 <md-table-head md-sort-by="fat" md-numeric>Fat (g)</md-table-head>
                 <md-table-head md-sort-by="carbs" md-numeric>Carbs (g)</md-table-head>
                 <md-table-head md-sort-by="protein" md-numeric>Protein (g)</md-table-head>

src/components/mdTable/mdTable.scss

@@ -3,6 +3,7 @@
 .md-table {
   display: flex;
   flex-flow: column wrap;
+  overflow: auto;
 
   &.md-transition-off {
     tr,
@@ -51,9 +52,13 @@
     height: 100%;
     padding-right: 32px;
     padding-left: 24px;
-    display: flex;
-    align-items: center;
     transition: $swift-ease-out;
+    line-height: 56px;
+  }
+
+  .md-table-head-text {
+    height: 28px;
+    line-height: 28px;
   }
 
   .md-sortable {
@@ -121,7 +126,7 @@
     }
 
     .md-table-cell-container {
-      padding: 0 24px 0 32px;
+      padding: 0 32px 0 24px;
     }
 
     &.md-numeric {
@@ -130,7 +135,7 @@
   }
 
   .md-table-selection {
-    width: 20px;
+    width: 60px;
     position: relative;
     vertical-align: middle;
 

src/components/mdTable/mdTableHead.vue

@@ -3,8 +3,10 @@
     <div class="md-table-head-container" v-md-ink-ripple="!mdSortBy">
       <md-icon v-if="mdSortBy">arrow_downward</md-icon>
 
-      <span>
+      <span class="md-table-head-text md-test">
         <slot></slot>
+
+        <md-tooltip v-if="mdTooltip">{{ mdTooltip }}</md-tooltip>
       </span>
     </div>
   </th>
@@ -14,7 +16,8 @@
   export default {
     props: {
       mdNumeric: Boolean,
-      mdSortBy: String
+      mdSortBy: String,
+      mdTooltip: String
     },
     data() {
       return {
@@ -31,6 +34,7 @@
         }
 
         return {
+          'md-numeric': this.mdNumeric,
           'md-sortable': this.mdSortBy,
           'md-sorted': matchSort && this.sorted,
           'md-sorted-descending': matchSort && this.sortType === 'desc'

src/components/mdTooltip/mdTooltip.vue

@@ -107,14 +107,6 @@
         tooltipElement.addEventListener('transitionend', onTransitionEnd);
       };
 
-      if (this.$parent.$el.classList === targetElement.classList) {
-        [].slice.call(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);