fix(tooltip): avoid capturing the initial tap on mobile

Currently the tooltip always binds the `mouseenter` and `mouseleave` events, however this can cause the click handlers on the tooltip host not to be fired on the first tap. These changes switch to binding the events only on devices that have touch events.

Fixes #2326.

Author: crisbeto

src/lib/core/platform/features.ts

@@ -34,3 +34,7 @@ export function getSupportedInputTypes(): Set<string> {
   }
   return supportedInputTypes;
 }
+
+/** Whether the current browser supports touch events. */
+export const HAS_TOUCH_EVENTS = typeof window !== 'undefined' && !!(('ontouchstart' in window) ||
+    ((window as any).DocumentTouch && document instanceof (window as any).DocumentTouch));

src/lib/tooltip/tooltip.ts

@@ -14,7 +14,8 @@ import {
   AnimationTransitionEvent,
   NgZone,
   Optional,
-  OnDestroy
+  OnDestroy,
+  Renderer,
 } from '@angular/core';
 import {
   Overlay,
@@ -30,6 +31,7 @@ import {MdTooltipInvalidPositionError} from './tooltip-errors';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {Dir} from '../core/rtl/dir';
+import {HAS_TOUCH_EVENTS} from '../core/platform/features';
 import 'rxjs/add/operator/first';
 
 export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
@@ -48,8 +50,6 @@ export const TOUCHEND_HIDE_DELAY  = 1500;
   host: {
     '(longpress)': 'show()',
     '(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')',
-    '(mouseenter)': 'show()',
-    '(mouseleave)': 'hide()',
   },
   exportAs: 'mdTooltip',
 })
@@ -101,11 +101,21 @@ export class MdTooltip implements OnDestroy {
   get _deprecatedMessage(): string { return this.message; }
   set _deprecatedMessage(v: string) { this.message = v; }
 
-  constructor(private _overlay: Overlay,
-              private _elementRef: ElementRef,
-              private _viewContainerRef: ViewContainerRef,
-              private _ngZone: NgZone,
-              @Optional() private _dir: Dir) { }
+  constructor(
+    private _overlay: Overlay,
+    private _elementRef: ElementRef,
+    private _viewContainerRef: ViewContainerRef,
+    private _ngZone: NgZone,
+    private _renderer: Renderer,
+    @Optional() private _dir: Dir) {
+
+    // The mouse events shouldn't be bound on touch devices, because
+    // they can prevent the first tap from firing it's click event.
+    if (!HAS_TOUCH_EVENTS) {
+      _renderer.listen(_elementRef.nativeElement, 'mouseenter', () => this.show());
+      _renderer.listen(_elementRef.nativeElement, 'mouseleave', () => this.hide());
+    }
+  }
 
   /**
    * Dispose the tooltip when destroyed.