fix(tooltip): content text was semi-opaque

Closes #1480.
Closes #1492.

src/components/tooltip/tooltip.js

@@ -57,6 +57,7 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
     $mdTheming(element);
     var parent = element.parent();
     var background = angular.element(element[0].getElementsByClassName('md-background')[0]);
+    var content = angular.element(element[0].getElementsByClassName('md-content')[0]);
     var direction = attr.mdDirection;
 
     // Keep looking for a higher parent if our current one has no pointer events
@@ -131,11 +132,13 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
       positionTooltip();
       $animate.addClass(element, 'md-show');
       $animate.addClass(background, 'md-show');
+      $animate.addClass(content, 'md-show');
     }
 
     function hideTooltip() {
       parent.removeAttr('aria-describedby');
       $q.all([
+        $animate.removeClass(content, 'md-show'),
         $animate.removeClass(background, 'md-show'),
         $animate.removeClass(element, 'md-show')
       ]).then(function () {

src/components/tooltip/tooltip.scss

@@ -30,15 +30,28 @@ md-tooltip {
   }
 
   .md-content {
+    position: relative;
     max-width: 240px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
     padding: 8px;
     background: transparent;
-    opacity: 0.3;
-    transition: inherit;
+    opacity: 0;
+    &.md-show-add {
+      transition: $swift-ease-out;
+      opacity: 0;
+    }
+    &.md-show, &.md-show-add-active {
+      opacity: 1;
+    }
+    &.md-show-remove {
+      transition: $swift-ease-in;
+      &.md-show-remove-active {
+        opacity: 0;
+      }
+    }
   }
 
   &.md-hide {
@@ -49,9 +62,5 @@ md-tooltip {
     transition: $swift-ease-out;
     pointer-events: auto;
     transform: translate3d(0,0,0);
-
-    .md-content {
-      opacity: 0.99;
-    }
   }
 }