feat(tooltip): add configurable md-delay attr, default 400ms.

Closes #713.

src/components/tooltip/tooltip.js

@@ -32,6 +32,7 @@ angular.module('material.components.tooltip', [
  *
  * @param {expression=} md-visible Boolean bound to whether the tooltip is
  * currently visible.
+ * @param {number=} md-delay How many milliseconds to wait to show the tooltip after the user focuses, hovers, or touches the parent. Defaults to 400ms.
  */
 function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdTheming, $rootElement) {
 
@@ -45,11 +46,19 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
       '<div class="md-background"></div>' +
       '<div class="md-content" ng-transclude></div>',
     scope: {
-      visible: '=?mdVisible'
+      visible: '=?mdVisible',
+      delay: '=?mdDelay'
     },
-    link: postLink
+    compile: compile,
   };
 
+  function compile(element, attr) {
+    if (!angular.isDefined(attr.mdTooltipDelay)) {
+      attr.$set('mdDelay', TOOLTIP_SHOW_DELAY);
+    }
+    return postLink;
+  }
+
   function postLink(scope, element, attr, contentCtrl) {
     $mdTheming(element);
     var parent = element.parent();
@@ -98,7 +107,7 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
     // Methods
     // *******
 
-    // If setting visible to true, debounce to TOOLTIP_SHOW_DELAY ms
+    // If setting visible to true, debounce to scope.delay ms
     // If setting visible to false and no timeout is active, instantly hide the tooltip.
     function setVisible(value) {
       setVisible.value = !!value;
@@ -109,7 +118,7 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
           $timeout(function() {
             scope.visible = setVisible.value;
             setVisible.queued = false;
-          }, TOOLTIP_SHOW_DELAY);
+          }, scope.delay);
 
         } else {
           $timeout(function() { scope.visible = false; });

src/components/tooltip/tooltip.spec.js

@@ -105,4 +105,21 @@ describe('<md-tooltip> directive', function() {
     expect($rootScope.isVisible).toBe(false);
   }));
 
+  it('should show after tooltipDelay ms', inject(function($compile, $rootScope, $timeout) {
+    var element = $compile('<md-button>' +
+               'Hello' +
+               '<md-tooltip md-visible="isVisible" md-tooltip-delay="99">' +
+                 'Tooltip' +
+               '</md-tooltip>' +
+             '</md-button>')($rootScope);
+    element.triggerHandler('focus');
+
+    expect($rootScope.isVisible).toBeFalsy();
+    $timeout.flush(98);
+    expect($rootScope.isVisible).toBeFalsy();
+    // Total 99 == tooltipDelay
+    $timeout.flush(1);
+    expect($rootScope.isVisible).toBe(true);
+  }));
+
 });